Link video: Video
As you see from start to weird behavior you don't see placeholder text.
Which instead of in the same input field as above but not found in the view, is seen correctly.
Can you tell me where I'm going wrong?
You can also try it with android expo emulator: https://snack.expo.dev/exQQvm0ve
Code:
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Badge, Button } from 'react-native-paper';
export default function App() {
const [value, setValue] = React.useState('');
const [dishs, setDishs] = React.useState([]);
const isDark = false;
const checkNumber = (array, numb) => {
return array.findIndex(({ dish }) => dish === parseInt(numb));
};
const addNumber = (numb) => {
const found = checkNumber(dishs, numb);
if (found === -1) setDishs([...dishs, { dish: parseInt(numb), times: 1 }]);
else {
const clone = JSON.parse(JSON.stringify(dishs));
clone[found].times++;
setDishs(clone);
}
};
return (
<View style={{ flex: 1, padding: 46 }}>
<TextInput
dense
mode="outlined"
label="Dish"
placeholder="Dish"
keyboardType="phone-pad"
maxLength={3}
value={value}
onChangeText={setValue}
onSubmitEditing={({ nativeEvent: { text } }) => {
setValue('');
if (text === '' || isNaN(text)) return;
addNumber(text);
}}
theme={{
colors: {
placeholder: isDark ? '#FFFFFF' : '#000',
text: '#1E90FF',
primary: '#1E90FF',
background: isDark ? '#1B1A23' : '#EFEFEF',
},
}}
/>
<View
style={{
marginTop: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<TextInput
dense
mode="outlined"
label="Dish"
placeholder="Dish"
keyboardType="phone-pad"
maxLength={3}
value={value}
onChangeText={setValue}
onSubmitEditing={({ nativeEvent: { text } }) => {
setValue('');
if (text === '' || isNaN(text)) return;
addNumber(text);
}}
theme={{
colors: {
placeholder: isDark ? '#FFFFFF' : '#000',
text: '#1E90FF',
primary: '#1E90FF',
background: isDark ? '#1B1A23' : '#EFEFEF',
},
}}
/>
<Button
style={{
backgroundColor: '#1E90FF',
width: 160,
height: 40,
}}
mode="contained">
Send
</Button>
</View>
</View>
);
}