---
# System prepended metadata

title: React Native system preference influences and solutions

---

# 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.
```jsx=
    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.

![UnicodeTable](https://i.imgur.com/A8n1iiO.png)

#### Solution

```jsx=
    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)
```jsx=
import { Text, TextInput } from 'react-native';

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

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