I have an input that is cutt off at the top. Is it possible to have it aligned directly under the black bar without writing specific margins/padding for it? If I take off the padding the element completely dissapears from the screen
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.button}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 35,
backgroundColor: '#ecf0f1',
},
button:{
borderRadius: 4,
borderWidth: 2,
width: 100,
height: 40,
borderColor: 'red',
backgroundColor: "rgb(72, 120, 166)",
}
});
SafeAreaView does not work on Android, I generally do this.
import React from 'react';
import { Platform, StyleSheet } from 'react-native';
const styles = new StyleSheet.create({
screenPadding: {
paddingTop: Platform.OS === 'android' ? 25 : 0,
}
});
Try using StatusBar.currentHeight which gives the Status Bar height in Android.
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions, StatusBar } from 'react-native';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.button}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
height: StatusBar.currentHeight,
backgroundColor: '#ecf0f1',
},
button:{
borderRadius: 4,
borderWidth: 2,
width: 100,
height: 40,
borderColor: 'red',
backgroundColor: "rgb(72, 120, 166)",
}
});
Using SafeAreaView
import React, { Component } from 'react';
import {View, TextInput, StyleSheet, Dimensions } from 'react-native';
import SafeAreaView from 'react-native-safe-area-view';
export default function IndoorFOrm() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<View style={styles.container}>
<SafeAreaView>
<TextInput
style={[styles.button, {paddingTop: insets.top}]}
onChangeText={text => onChangeText(text)}
value={value}
/>
</SafeAreaView>
</View>
);
}
Link: https://github.com/react-native-community/react-native-safe-area-view
add 'react-native-safe-area-context' to your project and then
import {SafeAreaView} from 'react-native-safe-area-context'
now use this particular <SafeAreaView></SafeAreaView> to wrap your view should work perfectly on iOS and android
Related
I have looked everywhere and can't figure out why my background image isn't working the path is fine and I've tried everything from wrapping it in a view, giving it a width and height. None of it works. I'm new to react native so I don't know is this a common problem. The login button shows up just fine it is purely the bg image.
Here is the code:
import React from "react";
import { ImageBackground, StyleSheet, Image, View } from "react-native";
function WelcomeScreen(props) {
return (
<View>
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.loginButton}></View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
});
Well adding a style to the view that contains the background image seemed to work. If anyone else has this issue update your code to look like this.
import React from "react";
import { ImageBackground, StyleSheet, Image, View } from "react-native";
function WelcomeScreen(props) {
return (
<View style={styles.container}>
<ImageBackground
source={require("../assets/background.jpg")}
style={styles.background}
>
<View style={styles.loginButton}></View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
background: {
flex: 1,
resizeMode: "cover",
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
});
import React from "react";
import { ImageBackground, StyleSheet, Image, View } from "react-native";
function WelcomeScreen(props) {
return (
<View style={styles.background}>
<ImageBackground
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.loginButton}></View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
});
I am getting unnecessary space but I want to start my code from the very top. I want to make header of my own or be able to customize the 'gray' region. How to do it? Pls check the attached picture
I am attaching code and picture alongwith.
Phone Screen Image
App.js code-
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import Header from './components/Header';
export default function App() {
return (
<View style={styles.screen}>
<Header title="I am Header" />
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
},
});
Header.js code-
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
const Header = (props) => {
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>{props.title}</Text>
</View>
);
};
const styles = StyleSheet.create({
header: {
width: '100%',
height: 90,
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
},
headerTitle: {
color: 'black',
fontSize: 18,
},
});
export default Header;
I have some sample code in an expo 38.0 react-native app that has a login, signup and forgotpwd screens. The navigation between these screens is controlled by a Stack Navigator (using react navigation 5.x) with login screen as the initial screen.
The stack navigator works as expected on my android phone, but there is a problem when Back button is pressed on ForgotPwdScreen component. The problem is that a moment after the login screen shows its contents everything on this screen suddenly moves down by a few pixels. I researched a lot for the last one day but nothing seemed to work. I have tried wrapping contents in SafeAreaView in login screen but it didn't help.
But if I include ForgotPwdScreen code in App.js then this problem is no more there. Only if ForgotPwdScreen is in its own separate file does this problem happen.
The full code sample is at the following snack: Working code for this issue
A video of this issue can be seen at Issue of stack navigator
This issue only happens on android phone and not on iphones.
Question : Why are the contents suddenly moving down in login screen after it has fully rendered when back button is pressed on ForgotPwdScreen but only when ForgotPwdScreen is in a separate js file?
Code files are as below.
package.json
{
"dependencies": {
"expo-status-bar": "^1.0.2",
"react-native-screens": "~2.9.0",
"#react-navigation/stack": "^5.9.1",
"react-native-reanimated": "~1.9.0",
"#react-navigation/drawer": "^5.9.1",
"#react-navigation/native": "^5.7.4",
"react-native-safe-area-context": "~3.0.7",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/async-storage": "~1.11.0"
}
}
App.js
import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
ScrollView,
StatusBar,
Keyboard,
ActivityIndicator,
Platform,
Image,
} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import {
createStackNavigator,
TransitionSpecs,
HeaderStyleInterpolators,
CardStackStyleInterpolator,
CardStyleInterpolators
} from '#react-navigation/stack';
import LoginScreen from './components/LoginScreen'
import ForgotPwdScreen from './components/ForgotPwdScreen'
function SignUpScreen () {
/* Component state. Change someState, setEnteredSomeState and state object as per your scenario. */
const [someState, setEnteredSomeState] = useState({
state1: '',
state2: '',
state3: false,
});
return (
<View style={styles.container}>
{/* Set statusbar background color and style so it blends with the screen */}
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<Text style={styles.label}>SignUp will show here</Text>
</View>
);
}
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false,
headerTitleAlign: 'center',
headerMode: 'screen',
}}>
<Stack.Screen
name="Login"
component={LoginScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ForgotPwd"
component={ForgotPwdScreen}
options={{ headerShown: true }}
/>
<Stack.Screen
name="SignUp"
component={SignUpScreen}
options={{ headerShown: true }}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
},
scroll: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
},
inputView: {
width: '80%',
backgroundColor: '#fff',
height: 50,
marginBottom: 20,
justifyContent: 'center',
alignSelf: 'center',
textAlign: 'left',
padding: 20,
borderBottomColor: 'black',
borderBottomWidth: 1,
marginTop: -20,
},
inputText: {
height: 50,
color: 'grey',
},
loginBtn: {
width: '70%',
backgroundColor: '#F26722',
height: 50,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
marginTop: 40,
marginBottom: 10,
borderWidth: 1,
borderColor: '#F26522',
},
loginText: {
color: 'white',
},
forgotText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
marginTop:20,
},
signupText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
forgotBtn: {
height: 50,
width:'100%',
marginTop:10,
},
signupBtn: {
height: 50,
width:'100%',
marginTop:20,
},
label: {
textAlign: 'center',
},
});
export default App;
ForgotPwdScreen.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView} from 'react-native';
export default function ForgotPwdScreen() {
return (
<View style={styles.container}>
{/* Set statusbar background color and style so it blends with the screen */}
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<Text style={styles.label}>ForgotPwd will show here</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
label: {
textAlign: 'center',
},
});
LoginScreen.js
import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
ScrollView,
StatusBar,
Keyboard,
ActivityIndicator,
Platform,
Image,
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
export default function LoginScreen({ route, navigation }) {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.scroll}
keyboardShouldPersistTaps="always">
<StatusBar backgroundColor="#fff" barStyle="dark-content" />
<TouchableOpacity
style={styles.forgotBtn}
onPress={() => navigation.navigate('ForgotPwd')}>
<Text style={styles.forgotText}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupBtn}
onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.signupText}>Signup</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#fff',
},
scroll: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
},
forgotText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
marginTop: 20,
},
signupText: {
color: '#337ab7',
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
forgotBtn: {
height: 50,
width: '100%',
marginTop: 10,
},
signupBtn: {
height: 50,
width: '100%',
marginTop: 20,
},
});
At last after 2 days of trying, I found the reason for this odd behavior.
This issue was happening due to expo-status-bar package that was included in ForgotPwdScreen.js. When I removed the import for expo-status-bar and instead used the StatusBar component that comes in react-native then the issue disappeared.
So, clearly there is some issue with expo-status-bar. It's best to not use it and rather use the default StatusBar that comes with react-native.
Original imports in ForgotPwdScreen.js
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView} from 'react-native';
Changed imports in ForgotPwdScreen.js that resolved the issue
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, ScrollView, StatusBar} from 'react-native';
I was editing one of the '.js' files and after saving my work after some changes, when I typed 'rr' to refresh application on the emulator, I kept getting this message.
Android Application Emulator keeps stopping
App info
Close app
enter image description here
After creating Form.js and under a components folder in my project in the visual studio code editor and importing it in my Login.js that's where the error started to occur. IDK what I did wrong. I'm new to React Native and am just learning.
Form.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
export default class Login extends Component<{}> {
render(){
return(
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
placeholderTextColor = "#ffffff"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
inputBox: {
width:300,
backgroundColor:'rgba(255,255,255,0.3)',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color:'#ffffff',
marginVertical: '10'
}
});
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Form';
export default class Login extends Component<{}> {
render () {
return(
<View style={styles.container}>
<Logo/>
<Form/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
backgroundColor: '#29b6f6',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
Here is your solution
Your application is crashed because of this props underlineColorAndroid="rgba(0,0,0,0)" in your TextInput and also minor change in inputBox style remove string value marginVertical: "10" to marginVertical: 10
Form.js
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Email"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Password"
placeholderTextColor="#ffffff"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
inputBox: {
width: 300,
backgroundColor: "rgba(255,255,255,0.3)",
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: "#ffffff",
marginVertical: 10 <-----Remove string to number---
}
});
Output:--
I have following code in App.js
import React, { Component } from 'react';
import { Text, View,} from 'react-native';
import{DrawerNavigator, DrawerActions} from 'react-navigation';
import { Menu} from './src/components/menu';
export default class MainView extends Component {
render(){
return(
<View>
<Menu />
<Text> WHAT ??? </Text>
</View>
);
}
}
and following code in src/components/menu.js
'use strict';
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import{DrawerNavigator, DrawerActions} from 'react-navigation';
export class Menu extends Component {
render(){
return(
<View style= {styles.navContainer}>
<View style= {styles.navContainerFlexing}>
<View>
<Icon name="bars" size={25} color= 'black' style={{marginLeft: 10, fontWeight: '200' }} onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())} />
</View>
<Text style={[styles.whiteText, styles.navItem]}>Home</Text>
</View>
</View>
);
}
}
export const Drawer = DrawerNavigator(
{
Menu: Menu,
},
{
// initialRouteName: 'Home',
},
{
drawerPosition: 'left',
initialRouteName: 'Home',
drawerBackgroundColor: 'white',
drawerWidth: 300,
}
);
const styles= StyleSheet.create({
navContainer: {
height: 55,
backgroundColor: '#3ba558',
alignItems: 'center',
// flex: 1,
flexDirection: 'row',
// justifyContent: 'flex-start'
},
navContainerFlexing: {
flex: 2,
flexDirection: 'row',
backgroundColor: '#3ba558',
paddingLeft: 20
},
whiteText: {
color: 'white',
},
navItem: {
alignItems: 'center',
marginTop: 'auto',
marginBottom: 'auto',
marginLeft: 10
},
});
Now I want my Menu class to display in App.js, which is displaying but and I also want it workable DrawerNavigator in homepage, right now the drawer is giving:
undefined is not an object (evaluating '_this.props.navigation.dispatch')
I Have explained the configuration of DrawerNavigator in the below link.
Look into the accepted answer in the below link.
How to create a Drawer Component and adding it to multiple screens
As I explained in it try to understand the concept and do not copy the syntax.
Do a comparison with your configuration, you will find your problem.