0

Link video: Video

enter image description here

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>
  );
}

Paul
  • 3,644
  • 9
  • 47
  • 113

0 Answers0