We Keep Coding

React Native, content going under navigation header, SafeAreaView not working

As you can see in the image below, I have to give some top margin in order to "not" hide my half of the content under the navigation header, isn't header supposed to be a "safe area" for the below content, to be on the safe side I provided the SafeAreaView but still my content goes under the Header and unfortunately I have to give some hardcoded margin top value to avoid hiding.
The above image is when I comment marginTop.
Above image is when I add marginTop: 70
Code:
NotificationScreen.tsx:
import {
View,
SafeAreaView,
Text,
StatusBar,
} from 'react-native';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import OrderItem from '../../components/OrderItem';
const NotificationScreen = () => {
const [orders, setOrders] = useState([]);
useEffect(() => {
// calling API...
}, []);
return (
<SafeAreaView style={styles.container}>
<StatusBar backgroundColor="transparent" translucent />
<Text style={{color: 'lightgray', fontSize: 18}}>My Orders: </Text>
<Animated.FlatList
data={orders}
entering={FadeIn}
leaving={FadeOut}
contentContainerStyle={{
alignItems: 'center',
}}
keyExtractor={(_: any, index) => 'key' + index}
renderItem={({item}) => <OrderItem key={item.id} data={item} />}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 70, // if I remove this, the content goes under the header as shown in image.
flex: 1,
padding: 10,
backgroundColor: COLORS.primary,
},
});
export default NotificationScreen;
One more query, why my OrderItem not taking the full width of FlatList (see image, the gray box is not takin the full width...), I have provided width: 100% to my OrderItem container:
OrderItem.tsx:
const OrderItem = ({data}) => {
return (
<View style={styles.container}>
<View style={styles.textBlock}>
<Text style={styles.label}>Strategy: </Text>
<Text style={styles.info}>{data.strategyTitle}</Text>
</View>
// ... same views as shown in image
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
paddingVertical: 10,
paddingHorizontal: 10,
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: COLORS.lightGray,
borderRadius: 10,
},
textBlock: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
label: {
color: 'grey',
fontSize: 16,
},
info: {
color: 'white',
fontSize: 16,
},
});
export default OrderItem;

The SafeAreaView does not work currently for Android devices. You need to have something like this to avoid this issue:
import { Platform,StatusBar } from "react-native";
const styles = StyleSheet.create({
container: {
paddingTop: Platform.OS == "android" ? StatusBar.currentHeight : 0,
},
});
<SafeAreaView style={styles.container}>
</SafeAreaView>
And for the OrderItem not taking all available width, remove from Animated.FlatList this:
contentContainerStyle={{alignItems: 'center'}}

TextInput disappears under keyboard in React Native

I am making a react native app and for some reason when I tap on the text input to type something it disappears under the keyboard. I want it to come to the top of the keyboard like the way Instagram messenger and other messenger apps do it. I tried using keyboardAvoidView and setting the behavior to padding and height but none of it worked.
import {
View,
Text,
StyleSheet,
SafeAreaView,
TextInput,
TouchableOpacity,
} from "react-native";
import CommunityPost from "../components/CommunityPost";
import { Context as CommunityContext } from "../context/CommunityContext";
const Key = ({ navigation }) => {
const { createCommunityPost, errorMessage } = useContext(CommunityContext);
const [body, setBody] = useState("");
return (
<View style={styles.container}>
<SafeAreaView />
<CommunityPost />
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline={true}
placeholder="Type..."
placeholderTextColor="#CACACA"
value={body}
onChangeText={setBody}
/>
<TouchableOpacity
style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
onPress={() => createCommunityPost({ body })}
>
<Text style={styles.sendText}>Send</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "flex-start",
backgroundColor: "#2B3654",
justifyContent: "flex-end",
},
inputContainer: {
justifyContent: "flex-end",
flexDirection: "row",
},
sendText: {
color: "white",
fontSize: 25,
},
input: {
fontSize: 25,
color: "white",
borderColor: "#2882D8",
borderWidth: 1,
borderRadius: 15,
width: "80%",
marginBottom: 30,
marginLeft: 10,
padding: 10,
},
});
export default Key;

You must KeyboardAvoidingView component provided by react native.
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={styles.container}
>
<SafeAreaView />
<CommunityPost />
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
multiline={true}
placeholder="Type..."
placeholderTextColor="#CACACA"
value={body}
onChangeText={setBody}
/>
<TouchableOpacity
style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
onPress={() => createCommunityPost({ body })}
>
<Text style={styles.sendText}>Send</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>

For these situations we can use one of these methods:
1.wrapping Component with <ScrollView></ScrollView>
2.wrapping Component with <KeyboardAvoidingView></KeyboardAvoidingView>
Sometimes our wrong given styles can make these happens too such as : Having a fixed value for our styles, check your margins and use one of the given methods
I hope it helps

Try using keyboardVerticalOffset and test it with different values.
For more info check this out

For those who want to keep the code clean, just use the FlatList component and add a View component involving the component with the states: {flex: 1, height: Dimensions.get ("window"). Height}.
Below left a component ready for anyone who wants to use, just wrap your component in this way:
<FormLayout>
{... your component}
</FormLayout>
Here is the solver component:
import React from 'react'
import { View, StyleSheet, FlatList, Dimensions } from 'react-native'
import Background from './Background'
const FormLayout = ({ children }) => {
const renderContent = <View style={styles.container}>
{children}
</View>
return <FlatList
ListHeaderComponent={renderContent}
showsVerticalScrollIndicator={false}
/>
}
const styles = StyleSheet.create({
container: {
flex: 1,
height: Dimensions.get('window').height * 0.95
}
})
export default FormLayout

Flex box in react Native is not working buttons wont show up

I have a problem with flex styles.
Scenario
If I put flex: 1 line in my code, the buttons won't show up
If I delete flex: 1 they show up.
Please help me! It's in the new React Native 0.61 I did delete flex but I need it.
How can I fix it? Or is share a bug in 0.61 ...
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Header from './Components/Header';
import StartGameScreen from './screens/StartGameScreen'
export default function App() {
return (
<View styles={styles.screen}>
<Header title="Geuss a Number"/>
<StartGameScreen/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
}
});
App.js
import React from 'react';
import { View, Text, StyleSheet, TextInput, Button } from 'react-native';
const StartGameScreen = props => {
return(
<View style={styles.screen1}>
<Text style={styles.title}>Start a New Game!</Text>
<View style={styles.inputContainer}>
<Text>Select a Number</Text>
<TextInput />
<View style={styles.buttonContainer}>
<Button title="Reset" />
<Button title="Confirm" onPress={() => {}} />
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
screen1: {
flex: 1,
padding: 10,
alignItems: 'center'
},
title: {
fontSize: 20,
marginVertical: 10
},
inputContainer: {
width: 300,
maxWidth: '80%',
alignItems: 'center'
},
buttonContainer: {
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: 15
}
});
export default StartGameScreen;
StartGameScreen.js
Photo 1: flex: 1 code in my StartGameScreen.js
Photo 2: by deleting flex: 1 code in my StartGameScreen.js the buttons shows
But I need my flex what am I doing wrong? Sorry for my poor post at the beginning its my first post !

try adding flex: 1 to inputContainer and to buttonContainer flex: 1 as well

Keyboard Hiding in react-native

I just followed the answer from the link react-native: hide keyboard
But the keyboard is coming as flash for fraction of seconds then it is dismissing. Is there is a way to avoid keyboard totally.

This helped me:
import { Keyboard } from 'react-native'
// Hide that keyboard!
Keyboard.dismiss();

Correct way is to dismiss View with TouchableWithoutFeedback and calling Keyboard.dismiss()
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.container}>
<TextInput keyboardType='numeric'/>
</View>
</TouchableWithoutFeedback>

You can use Keyboard.dismiss() for keyboard hide.
import React from "react";
import {
Keyboard,
StyleSheet,
View,
TextInput,
TouchableOpacity
} from "react-native";
export default function App() {
return (
<TouchableOpacity onPress={() => Keyboard.dismiss()}>
<View style={styles.MainContainer}>
<TextInput
style={styles.textinput}
placeholder="Enter Your Name"
/>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
text: {
fontSize: 28,
textAlign: "center"
},
textinput: {
paddingVertical: 12,
margin: 8,
borderRadius: 7,
backgroundColor: "#F9FBE7",
borderWidth: 2,
borderColor: "#000000",
textAlign: "center"
}
});

React Native : View does not bound to the right

I've been dabbling with some react native code and found that my view does not have a right boundary in both android and iOS renders. So when I add a horizontal margin, the view displays margin only on the left like this.
I am also attaching my code and styles to guide me on where I would have gone wrong.
Login.js
import React,{Component} from 'react';
import {View,ToolbarAndroid,Text, Image, StatusBar,TextInput, TouchableOpacity} from 'react-native';
import styles from './styles.js'
class LogIn extends Component {
constructor(props) {
super(props)
this.state = {hostName: '', userName: '', password: ''}
}
onButtonPress() {
this.props.onSubmit && this.props.onSubmit(this.state);
}
render() {
return(
<Image style={styles.container} source={images.background}>
<StatusBar backgroundColor="#00EF6C00" translucent={true}/>
<View style={styles.logocontainer}>
<FitImage source={images.logo} resizeMode="contain" resizeMethod="scale" style= {{width: 300,position: 'absolute', left: 50, height: 100}}/>
</View>
<View style={styles.comp_container}>
<TextInput placeholder="Host Name" style={{height: 40}} onChangeText={(text) => this.setState({hostName: text})}/>
<TextInput placeholder="User Name" style={{height: 40}} onChangeText={(text) => this.setState({userName: text})}/>
<TextInput placeholder="Password" style={{height: 40}} onChangeText={(text) => this.setState({password: text})}/>
<TouchableOpacity onPress={this.onButtonPress.bind(this)} style={{height: 40, flex: 1, flexDirection: 'row'}}>
<Text style={{flex: 1}}> Submit </Text>
</TouchableOpacity>
</View>
</Image>
)
}
}
LogIn.propTypes = {
onSubmit: React.PropTypes.func,
}
export default LogIn;
Also Please find the attached stylesheet for further information on style
import { StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
toolbar: {
backgroundColor: '#EF6C00',
height: 56,
elevation: 3,
},
textInput: {
borderRadius: 20,
borderColor: "#FFFFFF",
height: 40,
},
button: {
height: 40,
},
logocontainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
},
comp_container: {
flex: 2,
flexDirection: 'column',
justifyContent: 'center',
marginHorizontal: 16,
}
});
export default styles
Edit: It is almost palpable that the problem should be with react-native unable to decide where the view boundary is. So instead of wrapping within the view, it decides to extent it. I also would love to get to know of any tools which can help me debug the UI issues, like the uiautomationviewer for android.

You do not specify width nor resizeMode in background image so it overflows screen. By default alignItems is stretch, TouchableOpacity fills container on horizontal and also overflows screen.