I copied straight from the documentation here:
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
<View style={styles.main}>
<ViewPagerAndroid style={styles.viewPager} initialPage={0}>
<View style={styles.pageStyle}>
<Text>First page</Text>
</View>
<View style={styles.pageStyle}>
<Text>Second page</Text>
</View>
</ViewPagerAndroid>
</View>
</View>
And my stylesheet:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
main: {
backgroundColor: 'pink',
height: 300
},
viewPager: {
height: 100,
backgroundColor: 'skyblue'
},
pageStyle: {
padding: 20,
width: 100,
height: 100,
backgroundColor: 'green',
flex: 1
}
});
All is the pink and skyblue rectangles. I have no idea why the child is not rendering. Does anyone have any ideas?
Related
I have a ScrollView in react native where the functionality stops working only after I change the screen. For example: when I reload and land on the home screen (with the ScrollView) it all works fine. but when I use the bottom tab navigator to change the screen and return back to the home screen, it doesn't work anymore.
Thanks in advance for the help!
const Home = () => {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: COLORS.background }}>
<Header screenName="home" />
<View style={{ color: COLORS.secondary, flex: 14, paddingHorizontal: SIZES.width / 20}}>
<ScrollView
showsVerticalScrollIndicator={false}
>
<Text style={styles.popularHeader}>Title</Text>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={styles.popular}
>
<View style={styles.popularItem}>
<Text>Name</Text>
</View>
<View style={styles.popularItem}>
<Text>Name</Text>
</View>
<View style={styles.popularItem}>
<Text>Name</Text>
</View>
<View style={styles.popularItem}>
<Text>Name</Text>
</View>
</ScrollView>
<View style={styles.event}>
<Text style={styles.eventTitle}>event title</Text>
<Text style={styles.eventDate}>date</Text>
</View>
</ScrollView>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
popularHeader: {
color: COLORS.text,
fontSize: SIZES.h4,
alignSelf: 'center',
marginBottom: 10
},
popular: {
borderBottomWidth: 1,
paddingBottom: SIZES.height / 30,
marginBottom: SIZES.height / 30,
borderBottomColor: COLORS.secondary
},
popularItem: {
width: 100,
height: 100,
borderRadius: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.text,
marginRight: 10,
},
event:{
height: SIZES.height / 3,
backgroundColor: COLORS.text,
borderRadius: 5,
marginBottom: SIZES.height / 30,
padding: 10
},
eventTitle: {
fontSize: SIZES.h3,
alignSelf: 'center'
},
eventDate: {
fontSize: SIZES.h6,
alignSelf: 'center'
}
})
In case someone wonders, after a three-day-long search I found out the problem was with the bottomTabNavigator not unmounting the screens after a change of screen. so the solution that fixed my problem is:
in screenOptions:
unmountOnBlur: true
Default
when open keyboard
function PINInsert({ navigation }){
clearText = () => {
_textInput.setNativeProps({text: ''});
}
var onoff = 0
hideText = () => {
if(onoff == 0){
_textInput.setNativeProps({secureTextEntry: false});
onoff = 1;
}else{
_textInput.setNativeProps({secureTextEntry: true})
onoff = 0;
}
}
return(
<KeyboardAvoidingView style={styles.container0}>
<View style={PINInsertstyles.div0}>
<View style={{
alignContent: "center",
justifyContent: "center"}}>
<Image style={PINInsertstyles.flag} source={require('./assets/en.png')} />
</View>
<View style={{
alignContent: "center",
justifyContent: "center"}}>
<Image style={PINInsertstyles.flag} source={require('./assets/br.png')} />
</View>
</View>
<View style={PINInsertstyles.div1}>
<View style={{
height: 100,
width: 100,
alignItems: "center",
justifyContent: "center"
}}>
<Image style={PINInsertstyles.logo} source={require('./assets/headphone.png')} />
</View>
<View>
<Text style={{fontSize: 40}}>SoundFly</Text>
</View>
</View>
<View style={PINInsertstyles.div2}>
<View style={{flexDirection: "row", justifyContent: "center", alignItems: 'center'}}>
<TextInput
ref={component => _textInput = component}
style={{
height: 40,
width: 200,
margin: 5,
marginTop: 20,
borderWidth: 1,
borderColor: '#ccc',
fontSize: 20,
backgroundColor: '#fff'
}}
maxLength={6}
secureTextEntry={true}
placeholder="PIN"
/>
<TouchableOpacity onPress={hideText} >
<Icon name="eye" size={20} />
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={clearText}
style={{margin: 5, marginTop: 20, backgroundColor: 'red', padding: 5}}
>
<Text style={{justifyContent: 'center', alignItems: 'center', fontSize: 20}}>Clear text</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() =>
navigation.navigate('banner')}
style={{margin: 5, marginTop: 20, backgroundColor: 'purple', padding: 5}}
>
<Text style={{justifyContent: 'center', alignItems: 'center', fontSize: 20}}>Buscar</Text>
</TouchableOpacity>
</View>
<View style= {{height: 50}}></View>
</View>
</KeyboardAvoidingView>
);
};
const PINInsertstyles = StyleSheet.create({
div0: {
flex: 0.4,
backgroundColor: '#00FFEC',
flexDirection: "row-reverse",
alignItems: "flex-start",
},
div1: {
flex: 0.6,
backgroundColor: '#00DCCC',
alignItems: "center",
// justifyContent: "center"
},
div2: {
flex: 1,
backgroundColor: '#00BFBF',
alignItems: "center",
// justifyContent: "center"
},
flag: {
height: 50,
width: 80,
margin: 5
},
logo:{
height: 80,
width: 80,
margin: 10,
alignContent: "center",
justifyContent: "center",
alignItems: "center"
}
})
How I want is "When open keyboard, whole views go up without some view reducing size of itself."
I've tried a lot of example but my start is really different comparing with them cause most example starts complaining about keyboard covers contents but mine just send Views up but resizing them.
What am I doing wrong here?
You need to get dimension of window using
const windowHeight = Dimensions.get('window').height;
And then, insert justify-content: flex-end to container0.
Add a view right inside KeyboardAvoidingView and set minHeight to window height.
I am trying to add some space in the middle of two touchable components wrapped in a view
How do i go about doing that, I will include my style sheet
return (
<>enter code here
<View style={styles.container}>
<View style={styles.scrollContainer}>
<ScrollView
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
>
{images.map((image) => (
<Image key={image} style={styles.image} source={image} />
))}
</ScrollView>
</View>
<View style={styles.btn}>
`enter code here`<LinearGradient
colors={["#0A5640", "#0A5640"]}
style={{ alignItems: "center", borderRadius: 10 }}
>
<TouchableOpacity onPress={() => navigation.navigate("SignIn")}>
<Text style={styles.btnAuth}>Sign In</Text>
</TouchableOpacity>
</LinearGradient>
<LinearGradient
colors={["#FFC72A", "#FFC72A"]}
style={{ alignItems: "center", borderRadius: 10 }}
>
<TouchableOpacity
onPress={() => navigation.navigate("CreateAccount")}
>
<Text style={styles.btnAuth}>Sign Up</Text>
</TouchableOpacity>
</LinearGradient>
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "#0A5640",
},
scrollContainer: {
height: "100%",
},
image: {
width,
height: "100%",
},
btnAuth: {
fontSize: 18,
fontWeight: "bold",
paddingHorizontal: 60,
paddingVertical: 10,
color: "#fff",
marginLeft: 10,
},
btn: {
color: "#fff",
marginTop: 70,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
alignContent: "space-between",
zIndex: 200,
paddingRight: 10,
paddingLeft: 10,
bottom: 3,
position: "absolute",
},
});
Did you mean the space between SignIn and SignUp button? You can use flex or width to define the touchableOpacity width. Is this something that you tried to achieve?
import * as React from 'react';
import {Text,View,StyleSheet,TouchableOpacity,}from 'react-native';
export default function App() { return (
<View style={styles.container}>
<View style={styles.btn}>
<TouchableOpacity style={styles.btnAuth}>
<Text style={{color:'#000', fontSize:18}}>Sign In</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btnAuth}>
<Text style={{color:'#000', fontSize:18}}>Sign Up</Text>
</TouchableOpacity>
</View>
</View> ); }
const styles = StyleSheet.create({ container: { backgroundColor: '#0A5640', flex:1 }, btnAuth: {
padding: 20,
width : '45%',
alignItems:'center',
backgroundColor:'yellow' }, btn: {
color: '#fff',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
bottom: 3,
position: 'absolute', }, });
Im trying to make a flatlist with some data and a button on each row.
I have tried to do it in a typical "web" fashion, with nested views and formating the elements relative to their parent, but with no success.
this is the current structure of the list:
<View style={styles.row}>
<View style={styles.rowinfo}>
<View>
<Text style={styles.primaryID}>{item.name ? item.name : item.phoneNumber}</Text>
<Text style={styles.secondaryID}>{item.name ? item.phoneNumber : 'Ukjent innringer'}</Text>
</View>
<View>
<Text style={styles.textalignRight}>Varighet: {item.durationDisplay}</Text>
<Text style={styles.textalignRight}>{item.dateStringTime}</Text>
</View>
</View>
<TouchableOpacity style={styles.rowicon}>
<View style={styles.ban_icon}>
<Icon
name='ban'
type='font-awesome'
color='#FFF'
/>
</View>
</TouchableOpacity>
</View>
And here is my styling:
const styles = StyleSheet.create({
row: {
flex: 1,
marginTop: 1,
paddingVertical: 10,
paddingHorizontal: 15,
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: '#f9f9f9'
},
rowinfo:{
flexDirection: "row",
alignSelf: 'stretch'
},
primaryID: {
fontWeight: 'bold'
},
textalignRight: {
textAlign: 'right'
},
rowbt: {
justifyContent: "center",
alignItems: "center",
backgroundColor: 'red'
},
ban_icon: {
color: '#FFF',
fontWeight: 'bold',
fontSize: 14,
marginHorizontal: 8
}
});
I im trying to make it look like this:
But i keep getting this:
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<View style={styles.rowinfo}>
<View>
<Text style={styles.primaryID}>{'Phone Number'}</Text>
<Text style={styles.secondaryID}>{'Ukjent innringer'}</Text>
</View>
</View>
<View style={{ flexDirection: 'row'}}>
<View>
<Text style={styles.textalignRight}>Varighet: {'1m og 20s'}</Text>
<Text style={styles.textalignRight}>{'13:23:11'}</Text>
</View>
<TouchableOpacity style={styles.ban_icon}>
<View style={styles.ban_icon} />
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
},
row: {
backgroundColor: 'green',
width: '100%',
marginTop: 1,
paddingVertical: 10,
paddingHorizontal: 15,
flexDirection: "row",
justifyContent: "space-between",
borderBottomWidth: 1,
borderBottomColor: '#f9f9f9'
},
rowinfo:{
flex: 1,
flexDirection: "row",
},
primaryID: {
fontWeight: 'bold'
},
textalignRight: {
textAlign: 'right'
},
ban_icon: {
padding: 10,
backgroundColor: 'red',
marginLeft: 10,
}
});
Check the snack: https://snack.expo.io/#legowtham/43c687
I was able to get my desired result by using absolute positioning.
i want to align 3 Views in a row:
|Icon| |Title| |Buttons|
The Title can be more than one line. The buttons are 0-3 Buttons, so their width is unknown to me.
Now the problem is, if I got more than one line in the title the buttons are cut off. How can i solve this and make sure the buttons are always on the screen and the title just has the space that is left?
On this screenshot 2 listitems are visible. Both should have 3 buttons on the right, but with the long title in the second row, the buttons are cut off
render() {
return (
<TouchableHighlight style={styles.view} underlayColor={'#eee'} onPress={this.props.navigateToDetails}>
<View style={{flex: 1}}>
<View style={styles.header}>
<View style={styles.headerTitle}>
<MaterialIcons style={styles.icon} name={"worker"}/>
<MentionsText style={styles.title}
>
{this.props.siteVisitNote.title}
</MentionsText>
</View>
<View style={styles.buttons}>
<FontAwesomeIcons style={styles.icon} name="tag"/>
{Utils.objectExists(this.props.siteVisitNote.attachments) || true ?
<FontAwesomeIcons style={styles.icon} name="paperclip"/> : null}
{Utils.objectExists(this.props.siteVisitNote.images) || true ?
<FontAwesomeIcons style={styles.icon} name="picture-o"/> : null}
</View>
</View>
<MentionsText style={styles.text}
>{this.getText()}</MentionsText>
</View>
</TouchableHighlight>
)
}
}
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
justifyContent: "space-between",
},
headerTitle: {
flexDirection: 'row'
},
view: {
flex: 1,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#efeff4',
padding: 8,
minHeight: 40,
},
buttons: {
flexDirection: "row",
alignSelf: 'flex-end',
},
icon: {
fontSize: 20,
paddingRight: 5,
color: "#333333",
padding: 8
},
title: {
color: "#333333",
fontSize: 14,
fontWeight: 'bold',
padding: 8,
},
text: {
color: "#333333",
fontSize: 14,
padding: 8
}
});
Thanks!
Add flex: 1 to headerTitle, and title.
If that doesn't work see my working example of this layout here which you can compare.
https://gist.github.com/WilliamIPark/2ad3ecf47c5c1e559086e4b10d0cf018
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
export default class App extends Component {
render() {
return (
<ScrollView
style={{ backgroundColor: '#edf2f9'}}
contentContainerStyle={styles.container}
>
<View style={styles.card}>
<View style={styles.header}>
<View style={styles.iconTitle}>
<View style={styles.icon} />
<Text>Hello world</Text>
</View>
<View style={styles.buttonWrap}>
<View style={styles.button} />
<View style={styles.button} />
<View style={styles.button} />
</View>
</View>
<View>
<Text>
Some other content...
</Text>
</View>
</View>
<View style={styles.card}>
<View style={styles.header}>
<View style={styles.iconTitle}>
<View style={styles.icon} />
<Text style={styles.title}>
Hello world this is some really long title right here, that
goes on and on and on. And then some!
</Text>
</View>
<View style={styles.buttonWrap}>
<View style={styles.button} />
<View style={styles.button} />
<View style={styles.button} />
</View>
</View>
<View>
<Text>
Some other content...
</Text>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#edf2f9',
},
card: {
backgroundColor: 'white',
height: 200,
width: 320,
shadowColor: 'black',
shadowOpacity: 0.25,
shadowOffset: {x: 10, y: 10},
padding: 10,
marginTop: 10,
},
header: {
borderBottomWidth: 0.5,
borderBottomColor: 'lightgrey',
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between',
},
iconTitle:{
flexDirection: 'row',
flex: 1,
marginBottom: 10,
},
icon: {
height: 24,
width: 24,
backgroundColor: 'black',
marginRight: 5,
},
title: {
flex: 1,
},
buttonWrap: {
flexDirection: 'row',
},
button: {
height: 24,
width: 24,
backgroundColor: 'red',
marginLeft: 5,
}
});