I am practicing in React Native and Expo a very basic project. The project does not use ejected projects so I cannot directly interact with the projects of the specific platforms (Android & iOS) and I want it to remain that way.
A few days ago I saw a problem in Android when trying to edit a field of a login form. It turns out that a small white flash appears before the keyboard opens. As I have read in almost all the Expo pages on GitHub, it is because the application has a blank view of the application and that this behavior could be changed in the projects of these platforms (which I mentioned earlier that I do not have) and I was looking this week to find a way to achieve this then I found this docs but I still don't know if this will work and if it is possible to change said root view color: https://docs.expo.io/versions/latest/sdk/register-root-component/
The video with the keyboard problem: https://i.sstatic.net/uOvZl.jpg
The error I am having is the same as in this video but I don't know if there is a way that will solve the problem since I have to use React Navigation v5 to create a stack for the navigation. Also, I'm using black as background what makes this behavior more noticeable.
I have tried different things such as changing the layout mode of the keyboard (but it makes me lose the ability to scroll), also making it more responsive the view with KeyboardAvoidingView and ScrollView but it has not been possible.
Here is what I am using:
- Expo SDK 39
- Expo CLI: 3.28.5
- React Navigation v5
Here is some code:
package.json dependencies
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.10.6",
"@react-navigation/native": "^5.8.6",
"@react-navigation/stack": "^5.12.3",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}
App.json
{
"expo": {
"name": "appName",
"slug": "appName",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"backgroundColor": "#000000",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#000000"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": false
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#000000"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
App.js
import React from "react";
import { View, TextInput } from "react-native";
export default App = () => {
return (
<View
style={{
backgroundColor: "#000",
flex: 1,
alignItems: "center",
justifyContent: "center",
}}
>
<TextInput
placeholder="Email"
placeholderTextColor="#424242"
style={{
color: "white",
backgroundColor: "#d8d8d8",
padding: 15,
width: "80%",
}}
/>
</View>
);
};