I'm brand new to react native. I'm trying to figure out how to make a box full height.
I have tried to add flex property to both container and view, but the height is not 100%.
export default class LinksScreen extends React.Component {
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1, backgroundColor: '#fff', flexGrow: 1 }}>
<Text>Hallo</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
padding: 20,
backgroundColor: 'blue',
},
});
You need to wrap the ScrollView with a View that has height. ScrollViews must have a bounded height in order to work. You can read more details about that here: https://facebook.github.io/react-native/docs/scrollview
Do it something like below:
render() {
return (
<View style={styles.container}>
<View style={{height: 80}} >
<ScrollView
...
EDIT
Your code actually works. Maybe you just want to see if your scrollview works when the whole screen is occupied. Try this below and you will see, I simply multiplied the text contents 80 times:
render() {
return (
<ScrollView style={styles.container}>
<View style={{ flex: 1, backgroundColor: "#fff", flexGrow: 1 }}>
{Array(80)
.fill(1)
.map((item, index) => (
<Text>Hallo {index}</Text>
))}
</View>
</ScrollView>
);
}
Remove flex:1
Give height:"100%"
width: "100%"
Related
I want to display 2 images side by side, 1 at left, 1 at right side, each image should be contained in half size of the screen.
I followed [flexbox tutorial] (https://facebook.github.io/react-native/docs/flexbox) but still have problems: image1 and image2 are not contained and take a large part of the screen ( I want image 1 starts on the left and does not go over the middle of the screen - and image2 starts from the middle and take the space until the left of the screen).
Do you know how to do it ?
render() {
return (
<View style ={styles.container}>
<ImageBackground
source={require("./images/background.jpg")}
style={styles.background}>
{/* It is in this part I have a problem */}
<View style ={styles.imageContainer}>
<View style ={{flex:1}}>
<Image resizeMode='contain'
style ={styles.image}
source={require("./images/image1.png")}/>
</View>
<View style ={{flex:1}}>
<Image resizeMode='contain'
style ={styles.image}
source={require("./images/image2.png")}/>
</View>
</View>
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
alignItems: 'center',
},
image: {
flex: 1,
alignItems: 'center',
},
background: {
width: '100%',
height: '100%',
alignItems: 'center',
}
});
You have to provide image width and height, for achieving the requirement.
Can you try with this?
render() {
return (
<View style ={styles.container}>
<ImageBackground
source={require("./images/background.jpg")}
style={styles.background}>
{/* It is in this part I have a problem */}
<View style ={styles.imageContainer}>
<Image resizeMode='contain'
style ={{width: Dimensions.get('window').width/2, height: Dimensions.get('window').width/2}}
source={require("./images/image1.png")}/>
<Image resizeMode='contain'
style =style ={{width: Dimensions.get('window').width/2, height: Dimensions.get('window').width/2}}
source={require("./images/image2.png")}/>
</View>
</ImageBackground>
</View>
);
}
}
Don't forgot to import,
import { Dimensions } from 'react-native'
this is my genymotion screen !!!!
this is my code . Just react-native program And the trouble in my photo.Android is Not , IOS is great .how hack in android to make it right .
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class TestScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text></Text>
<View style={styles.parent}>
<View style={styles.children}>
<Text>my content </Text>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
},
parent: {
width:300,
height: 40,
backgroundColor: 'yellow',
alignItems:'center',
position:'absolute',
},
children:{
height:20,
justifyContent: 'center',
top:-10
}
})
How should I Fix it
Overflow is not supported on Android: https://github.com/facebook/react-native/issues/6802
You can try this library:
https://github.com/entria/react-native-view-overflow
Or you could try to do some sort of absolute positioning with your view, but it might not be perfect. The below example puts all of the views in one parent, and then offsets the text to overlap both with an absolute position.
render() {
return (
<View style={styles.container}>
<View style={{ height: 40}}/>
<View style={{ height: 40, backgroundColor: "yellow"}}/>
<View style={{ position: "absolute", top: 30}}>
<Text>my content </Text>
</View>
</View>
)
}
I use react-native-swiper and i want to add a text above my image.
I try to set style container image paragraph, it is still not working.
What should i do about the style setting ?
Any help would be appreciated. Thanks in advance.
import React, { Component } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import Swiper from 'react-native-swiper';
const dimensions = Dimensions.get('window').width;
class About extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<Swiper
style={styles.wrapper}
height={200}
paginationStyle={{bottom: 10}}
>
<View style={styles.container}>
<Image style={styles.image} source={require('../img/home_service_bg1.jpg')} />
<Text style={styles.paragraph}>How to let me show above the img.</Text>
</View>
<View style={{ flex: 1 }}>
<Image source={require('../img/home_service_bg2.jpg')} style={styles.img}/>
</View>
</Swiper>
<View style={{ flex: 2 }}>
<Text>Hi</Text>
</View>
</View>
);
}
}
const styles = {
wrapper: {
},
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
image: {
flexGrow:1,
height:null,
width:null,
alignItems: 'center',
justifyContent:'center',
},
paragraph: {
textAlign: 'center',
},
};
export default About;
Here is my situation now:
I hope it becomes like this:
position="absolute" will make it work as Android RelativeLayout.
If you want set view on top set marginTop to 0.
After seeing your requirement. You can simply use ImageBackground
<ImageBackground source={...} style={{width: '100%', height: '100%'}}>
<Text>Inside</Text>
</ImageBackground>
See facebook docs
I'm trying to do a two column layout in React Native from a list of items. It only seems to work if I define the width of the items, I would like to define just a percentage of the parent width (0.5 would make a 2 column layout, but 0.25 would make a 4 column one). Can this be done?
export default class App extends Component {
render() {
return (
<View style={[styles.container, {width:width}]}>
<View style={styles.item}><Text>{'item1'}</Text></View>
<View style={styles.item}><Text>{'item2'}</Text></View>
<View style={styles.item}><Text>{'item3'}</Text></View>
<View style={styles.item}><Text>{'item4'}</Text></View>
<View style={styles.item}><Text>{'item4'}</Text></View>
<View style={styles.item}><Text>{'item5'}</Text></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
},
item :{
flex: 0.5, //why this doesnt work???
// width: 150, //using fixed item width instead of flex: 0.5 works
height: 100,
padding: 10,
backgroundColor: 'red',
// flexGrow: 1,
// flexShrink: 0,
}
});
You can play with it here: https://snack.expo.io/SyBjQuRxm
Css working equivalent: https://codepen.io/klamping/pen/WvvgBX?editors=110
Obviously I could do something like creating a container for each column, but that's not the point:
render() {
return (
<View style={[styles.container, {width:width}]}>
<View style={styles.column1}>
<View style={styles.item}><Text>{'item1'}</Text></View>
<View style={styles.item}><Text>{'item2'}</Text></View>
<View style={styles.item}><Text>{'item3'}</Text></View>
</View>
<View style={styles.column2}>
<View style={styles.item}><Text>{'item4'}</Text></View>
<View style={styles.item}><Text>{'item4'}</Text></View>
<View style={styles.item}><Text>{'item5'}</Text></View>
</View>
</View>
);
}
It is possible if you use percentage values for the widths:
<View style={styles.container}>
<View style={styles.item}>
...
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start' // if you want to fill rows left to right
},
item: {
width: '50%' // is 50% of container width
}
})
you can try scrollview with flatlist. the code below generates 2 columns. if you want 3 columns change numcolumn={data.length/3} etc.
<ScrollView
horizontal
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
contentContainerStyle={{
flexDirection: 'row',
flexWrap: 'wrap',
}}>
<FlatList
data={data}
renderItem={this.renderItem}
keyExtractor={item => `${item.id}`}
showsHorizontalScrollIndicator={false}
numColumns={data.length / 2}
/>
</ScrollView>
You could map the list of element into a an array of pairs.
Then render the pairs as a row inside a list
<View className="px-4 ">
{Buttons.map((row, i) => {
return (
<View className="flex-1 flex-row" key={i}>
{row.map((item, j) => {
return <ThumbButton key={j} {...item} />;
})}
</View>
);
})}
</View>
For making the nested array you could use this function https://stackoverflow.com/a/44937519/1807666
function combineTwo(inputArray: Array<object>) {
var result = [];
for (var i = 0; i < inputArray.length; i += 2) {
result.push([inputArray[i], inputArray[i + 1]]);
}
return result;
}'''
As you see the image, if the three red views are already added on the parent view. Now I want to add another blue view which can fill the rest space. How can I set the style?
You can try this;
<View style={{flex:1,backgroundColor:'white'}}>
<View style={{justifyContent:'space-around'}}>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',marginHorizontal:5}}/>
<View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>
</View>
<View style={{flex:1,alignItems:'center',justifyContent:'center',alignSelf:'stretch',backgroundColor:'blue',margin:5}}>
<Text style={{color:'white',fontWeight:'bold'}}>
View
</Text>
</View>
</View>
A much easier solution is to use the attribute flexGrow: 1 on the View you want to fill the remaining space.
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child’s flex grow value.
https://facebook.github.io/react-native/docs/flexbox
DEMO
Code
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.flexContainer}>
<View style={styles.box1}></View>
<View style={styles.box2}></View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: 8,
},
flexContainer: {
backgroundColor: 'black',
height: 100,
flexDirection: 'row'
},
box1: {
backgroundColor: 'blue',
width: 100,
height: '100%'
},
box2: {
backgroundColor: 'red',
height: '100%',
flexGrow: 1
}
});