React Native some style causes view to not render - javascript

Hi i am a newbie in React Native, and trying to create an android app using the same. If i change the style of my view -> (backgroundColor or borrderBottom) it just doesn't render. There is no error anywhere, but on reloading the js bundle, the view and all its children fail to render. More than solving this particular issue, i am more interested in understanding why is this happening or whether i am missing something. My component in its entirety is below
import React from 'react';
import { StyleSheet, View, Text, PixelRatio, TextInput } from 'react-native';
const styles = {
container: {
paddingTop: 70,
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '#fff',
},
form: {
flex: 1,
flexDirection: 'column'
},
rowContainer: {
//backgroundColor: '#000',
},
row: {
flexDirection: 'row',
height: 44,
alignItems: 'center',
},
inputLabel: {
fontSize: 15,
paddingLeft: 15,
color: '#333'
},
textInputStyle: {
fontSize: 15,
flex: 1,
paddingLeft: 15
}
};
export default function TestComponent(props) {
return (
<View style={styles.container}>
<Text> Inside Container </Text>
<View style={styles.form}>
<Text> Inside Form </Text>
<View style={styles.rowContainer} >
<Text> Inside Row Container </Text>
<View style={styles.row}>
<Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text>
<TextInput />
</View>
</View>
</View>
</View>
);
}
The above code works perfectly and all the components are rendered, however if i change the rowContainer style and uncomment backgroundColor, rowContainer and all its children are not rendered. I have no clue why this is happening. I also tried other styles inside rowContainer like
rowContainer: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#000'
borderBottomWidth: 1,
borderColor: '#c8c7cc'
}
As long as rowContainer style is empty it works, if i add anything inside it, the view simply doesn't render.

The default Text color is black and the rowContainers backgroundColor is set to '#000'. So it appears as not being rendered.

Related

Absolute positioning causes React Native component to go off screen

One of my React Native screens needs to have a TouchableOpacity at the bottom of the screen. I've tried setting position: "absolute" and bottom: 0, however, this just causes the element to be a few hundred pixels below the screen. How can I make my TouchableOpacity be at the bottom of the screen all the time?
<View style={styles.mainView}>
<View style={{ position: "relative" }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
}
/>
</View>
//styles
const styles = StyleSheet.create({
mainView: {
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "white",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
We could handle this without absolute positioning using flex alone.
Add flex:1 to the parent view and to the view that wraps the sticky bottom. Then, add flex: 2 to the view that wraps the other content.
Here is a minimal generic component that lets you add a sticky bottom component.
const MainScreen = ({bottom, children}) => {
return <View style={{flex: 1, backgroundColor: 'red'}}>
<View style={{flex: 2, backgroundColor: 'green'}}>
{children}
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}}>
{bottom}
</View>
</View>
}
export default function App() {
return <MainScreen bottom={
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>}>
</MainScreen>
}
The result looks as follows:
However, we can use absolute positioning as well. You are just missing the flex: 1 for the parent view.
export default function App() {
return <View style={styles.mainView}>
<View style={{ position: "absolute", bottom: 0 }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>
</View>
</View>
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "red",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
backgroundColor: "yellow",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
The result is as follows:
if you are using position as absolute then your view must be last view before last closed view tag
When you have declared any view at bottom of the screen then you should be do like this
import {View, SafeAreaView} from 'react-native';
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<!---Anything extra views---!>
<View style={{bottom:0,position:'absolute',start:0,end:0}}> !-- you're bottom view
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
</View>
</SafeAreaView >

React Native - Image Background content went past the screen

I am adding image background to my app, but the horizontal part of the image went past the screen (the right and left part got cut). I tried to use resizeMode cover and contain but both of it didn't do anything. Is there any other way to make the image stay within the screen? (I use resizeMode on Image and it contain the image normally {same picture}).
import React from 'react';
import {
Image,
ImageBackground,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {DCTBACKGROUND} from '../../../assets/images';
export default function GetStarted({navigation}) {
return (
<ImageBackground source={DCTBACKGROUND} style={styles.page}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate('Register');
}}>
<Text style={styles.buttonText}>Registrasi</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => {
navigation.navigate('Login');
}}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
page: {
backgroundColor: '#90CC8B',
flex: 1,
paddingHorizontal: 15,
paddingVertical: 25,
// resizeMode: 'contain',
},
button: {
backgroundColor: 'yellow',
width: 100,
height: 40,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
},
buttonText: {
color: 'black',
},
buttonContainer: {
justifyContent: 'space-between',
flexDirection: 'row',
},
logo: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
});
The image horizontal part got cut a bit and I need to make it all show without being cut.
Add the resizeMode as a direct prop to the ImageBackground and not as part of the StyleSheet.
<ImageBackground resizeMode="contain" source={DCTBACKGROUND} style={styles.page}>

Input text label on border in react native

I want to create an input box like this:
But I designed it like this, and I don't know how to add the label on the input border
My Code is:
<InputBox label="Email" icon={true} keyboardType="email-address" defaultValue={emailId} onChangeText={text => setEmailId(text)} />
Input Component:
import React from 'react';
import {View, StyleSheet, TextInput, Text} from 'react-native';
import {COLORS} from '../constants/colors';
import {FONT_FAMILY} from '../constants/font-family';
export default function InputBox(props) {
return (
<View style={styles.container}>
<View style={{flex: 1}}>
<Text style={styles.label}>{props.label}</Text>
<TextInput
placeholder={props.placeholder}
placeholderTextColor="#9F9F9F"
style={styles.input}
keyboardType={props.keyboardType}
secureTextEntry={false}
defaultValue={props.defaultValue}
onChangeText={props.onChangeText}
editable={props.editable}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 20,
paddingTop: 7.5,
paddingHorizontal: 12.5,
paddingBottom: 2.5,
borderRadius: 5,
borderWidth: 0.75,
borderColor: COLORS.WHITE,
},
input: {
fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 14,
height: 37,
color: COLORS.WHITE,
},
label: {
fontFamily: FONT_FAMILY.primary,
marginLeft: 5,
color: COLORS.WHITE,
fontSize: 12,
// marginTop: -30,
},
});
By using react-native-paper, when I add transparent background color it looks like this:
I was able to get this accomplished purely in React Native without any dependencies. The trick was to put the Text in a View with a background color the same as the screen's and position the Text absolutely. My example code hardcodes a lot of values, but if you want it to be responsive you'll need to come up with your own way of figuring those values out. The code:
import { View, Text, TextInput, StyleSheet } from "react-native";
const Input = () => {
return (
<View>
<View style={styles.labelContainer}>
<Text>Email Address</Text>
</View>
<View style={styles.inputContainer}>
<TextInput placeholder="Enter email address" />
</View>
</View>
);
}
const styles = StyleSheet.create({
labelContainer: {
backgroundColor: "white", // Same color as background
alignSelf: "flex-start", // Have View be same width as Text inside
paddingHorizontal: 3, // Amount of spacing between border and first/last letter
marginStart: 10, // How far right do you want the label to start
zIndex: 1, // Label must overlap border
elevation: 1, // Needed for android
shadowColor: "white", // Same as background color because elevation: 1 creates a shadow that we don't want
position: "absolute", // Needed to be able to precisely overlap label with border
top: -12, // Vertical position of label. Eyeball it to see where label intersects border.
},
inputContainer: {
borderWidth: 1, // Create border
borderRadius: 8, // Not needed. Just make it look nicer.
padding: 8, // Also used to make it look nicer
zIndex: 0, // Ensure border has z-index of 0
},
});
export default Input;
This is what it looks like on my device (Samsung Galaxy S10+):
If you have to use a material ui styled components you may wanna use reactnativepaper
hi there you cna use this code to achive
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import { TextInput } from 'react-native-paper';
export default function InputBox(props) {
return (
<View style={styles.container}>
<TextInput
mode="outlined"
label="Email"
style={{width:'90%'}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
justifyContent:'center',alignItems:'center',
flex:1
// borderColor: COLORS.WHITE,
},
input: {
// fontFamily: FONT_FAMILY.primaryMedium,
fontSize: 14,
height: 37,
// color: COLORS.WHITE,
},
label: {
// fontFamily: FONT_FAMILY.primary,
marginLeft: 5,
// color: COLORS.WHITE,
fontSize: 12,
// marginTop: -30,
},
});
you can test it on Snack
Also you can read more about props here react-native-paper

put icon and text in same line, opposite ends

I know similar questions have been asked before but I couldn't fix this myself. I have an icon and a text that should be displayed on both ends of the screen. The icon should be at the left end while the text should be at the right end.
However, the Text extends the screen and is hidden from the right side, even if I add marginRight or paddingRight. How can I fix this?
export default function App() {
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.topTextContainer}>
<BackArrow containerStyles={styles.arrowContainer} arrowStyles={styles.arrow}></BackArrow>
<Text style={styles.allFavoritePlaces}>Alle Lieblingsorts</Text>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
arrowContainer: {
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
},
arrow: {
color: 'black',
paddingTop: 0,
},
allFavoritePlaces: {
alignItems: 'flex-end',
paddingRight: moderateScale(0),
paddingBottom: moderateScale(10),
},
topTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingHorizontal: 20,
},
});
Here's a codesandbox too: https://snack.expo.io/#nhammad/sponaneous-candy
I opend it in the dev tools. The container of your arrow has some width assigned to it, when the screen gets to small it pushes the text out of the viewport.

How to share space with equal-size components in React-native

I have started recently with Javascript and React-native to test if it could be used in the future in my current company, but I'm facing some UI problems.
I'm making a test app with some, kind of almost useless functions to learn a bit of Javascript and how to link JS with native Android modules, but now I'm stuck with the interface. I used to make interfaces with RelativeLayout (ConstraintLayout now), and that's why I'm a bit frustrated with this HTML-like and CSS (which I don't specially know in depth, to be honest).
Given this UI . . .
. . . I actually want those buttons to share all the blank space on the screen and have the same heigth, but I don't want to set any width or heigth property, since I believe that each phone, with its own screen size and resolution, should handle the size of the components.
And serching around here and there, I discovered a property called flex that supposedly works like Android's LinearLayout weigth, but when I use it on any button, they just disappear:
So, how should/could I solve this?
Here are the "HTML" and styles used:
render() {
return (
<View style={styles.container}>
<View style={styles.containerText}>
<ScrollView
style={styles.scrollTextStyle}
contentContainerStyle={{ flexGrow: 1 }}
>
<Text style={styles.textStyle}>{this.state.textField}</Text>
</ScrollView>
<TextInput
multiline={true}
style={styles.inputStyle}
onChangeText={inputField =>
this.setState({
inputField
})}
value={this.state.inputField}
/>
</View>
<View style={styles.containerButton}>
<Button
style={[styles.buttons, styles.firstButton]}
onPress={() => this.pressedButton(1)}
>
Copy input to text
</Button>
<Button
style={[styles.buttons, styles.secondButton]}
onPress={() => this.pressedButton(2)}
>
Android/iOS Toast
</Button>
<Button
style={[styles.buttons, styles.thirdButton]}
onPress={() => this.pressedButton(3)}
>
Android module (Method)
</Button>
<Button
style={[styles.buttons, styles.fourthButton]}
onPress={() => this.pressedButton(4)}
>
Android module (AsyncTask)
</Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
//Root View
container: {
flex: 1,
flexDirection: "column",
backgroundColor: "#F5FCFF"
},
//Texts View
containerText: {
flex: 2,
justifyContent: "center",
backgroundColor: "#EFEFFF"
},
//Buttons View
containerButton: {
flex: 4,
flexDirection: "column",
backgroundColor: "#FFFFFF",
justifyContent: "space-between"
},
//Components on first View
scrollTextStyle: {
borderWidth: 1,
marginTop: 10,
marginBottom: 5,
marginHorizontal: 10,
flex: 1
},
textStyle: {
backgroundColor: "#CEF",
textAlign: "center",
textAlignVertical: "center",
flex: 1
},
inputStyle: {
borderWidth: 1,
marginTop: 5,
marginBottom: 10,
marginHorizontal: 10,
backgroundColor: "#CEF",
textAlign: "center",
textAlignVertical: "center",
flex: 1
},
//Components on second view
//Common style for all buttons and a different one for each
buttons: {
borderRadius: 5,
textAlign: "center",
textAlignVertical: "center",
fontSize: 20
},
firstButton: {
color: "#FFFFFF",
backgroundColor: "#D1E233"
},
secondButton: {
color: "#FFFFFF",
backgroundColor: "#239923"
},
thirdButton: {
color: "#FFFFFF",
backgroundColor: "#958475"
},
fourthButton: {
color: "#FFFFFF",
backgroundColor: "#651278"
}
});
By the way, I would appreciate any tutorial-like web about user interfaces on React-native, since I only found kind of useless things explaining properties, but no quality full examples.
You can use Dimension
import {Dimensions} from 'react-native';
Dimensions.get('window').height
or use react-native-easy-grid
<Grid>
<Row></Row>
<Row></Row>
</Grid>
It will create 2 equal height row
I would recommend wrapping all of the buttons in a div, and then making the div's height equal to the screen height - the height of your input fields.
Example: var {height, width} = Dimensions.get('window');
Source
This will then give the buttons a container to live in. After that you can use % for the height of the buttons. So if you have 4 buttons you can make the height of each of them 25% which would make them fit any screen.

Categories