# React Native system preference influences and solutions

## 1. Dark mode
Dark mode will effect IOS and some Android device. It will cause problem in Native `TextInput` and `Text` color display.

#### Cases
1. `TextInput` color is vanished in dark mode.
2. `Text` color is vanished in dark mode.
3. `ActiveIndicator` color is vanished in dark mode.

#### Reason
In IOS, dark mode will reverse some text's color from black to white, it may happend on Android from devices to devices. This problem usually happend when we set `placeholderTextColor` property in `TextInput` (true reason still unknown).

#### Solution
If the app does not need a dark mode, `Text` and `TextInput` color should be set.

    const [value, setValue] = useState('')
    <TextInput 
        placeholder={placeholder} 
        style={[{flex:1,color:'black'}]} 
        onChangeText={setValue} 
        alignSelf={'stretch'} 
        placeholderTextColor={placeholderTextColor} 
    />

For a more resuable and clean code, `Text` and `TextInput` Component should be custommized first rather than use directly.

## 2. Blank space
#### Cases
1. Blank space does not dispaly in `TextInput`, when `textAlign` property is set to `right`

#### Reason

There are several type blank space.
Unicode `\u0020` should be replace to `\u00a0`, which is the space that can separate char.


#### Solution

    const [value, setValue] = useState('')
    const _replaceSpace = (str) =>{
        return str.replace(/\u0020/, '\u00a0')
    }
    <TextInput 
        value={_replaceSpace(`${value}`)}
        onChangeText={setValue}
        textAlign={'right'}
    />

## 3. Global Font Size
IOS and Android system preference of font size will effect App font size.

### Solution
At top of the app (app/index.js)

import { Text, TextInput } from 'react-native';

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;