I am completely new to react native and am creating an application where I need to display items in a ListView.My ListView consists of 3 columns namely, author, title, price i.e. each row in ListView displays these three columns.Currently I am able to display only one column both in header section and the content section as
_renderRow(rowData){
return (
<View>
<Text style={styles.row}> {rowData.title}</Text>
</View>
)
},
_renderHeader(){
return (
<View style={styles.sectionDivider}>
<Text style={styles.headingText}>
Title
</Text>
</View>
)
},
And my render function is as
render() {
return(
<View style={styles.container}>
<ActivityIndicatorIOS
animating={this.state.isLoading}
size="large">
</ActivityIndicatorIOS>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
/>
</View>
)
}
So, I want to render 3 columns both in header as well as in content section.I googled it but could not find any relevant content.
Easily creating columns can be done with the flexbox style properties. For example:
_renderRow(rowData){
return(
<View styles={styles.flexRow}>
<Text>{rowData.title}</Text>
<Text>{rowData.author}</Text>
<Text>{rowData.price}</Text>
</View>
)
_renderHeader() {
return(
<View styles={styles.flexRow}>
<Text>Title</Text>
<Text>Author</Text>
<Text>Price</Text>
</View>
)
}
var styles = StyleSheet.create({
flexRow: {
flex: 1,
flexDirection: 'row' <---- This is the important style property
},
})
I created a snippet at https://rnplay.org/apps/p5hzcg if you want to play around with a working example.
you should try to modify your code with something like
_renderRow(rowData){
return (
<View>
<Text style={styles.column1}> {rowData.text1}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}> {rowData.text2}</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}> {rowData.text3}</Text>
</View>
)
},
_renderHeader(){
return (
<View>
<Text style={styles.column1}>textColumm1</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column2}>textColumm2</Text>
<View style={styles.sectionDivider}>
<Text style={styles.column3}>textColumm2</Text>
</View>
)
},
in this way each line will have 3 elements with same style, and if you fix the width of them it'll be exactly like columns.
Embedding text could alter the width value, so you have to decide what to do if the text is too long. So mostly deciding if to resize the text or going multiline.
Related
I want parent Screen to be fixed and Child Screen to be scrollable. using scroll doesn't provide me that functionality so what should I do ?
The ScrollView component does exactly what you want. The order of your components is the only important factor here.
In general, everything that is nested inside a ScrollView is scrollable, and everything outside is not. Hence,
<View>
<View>
// not scrollable
</View>
<ScrollView>
// scrollable
</ScrollView>
<View>
// not scrollable
</View>
</View>
Here is an example of a scrollable container using ScrollView that is nested inside a parent View which is fixed, meaning not scrollable.
<SafeAreaView style={{ margin: 5 }}>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Not scrollable</Text>
</View>
)
})}
</View>
<ScrollView>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Scrollable</Text>
</View>
)
})}
</ScrollView>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Also not scrollable</Text>
</View>
)
})}
</View>
</SafeAreaView>
which yields five text components at that top which are not scrollable, followed by five text components that are scrollable, followed by five text components that aren't scrollable.
I'm new at react native.I have a problem that i've been dealing for a few days.I want to show my data with map.Can you guys show me where i did wrong?
(I think i made mistake in the results inside scrollview)
class Movie extends Component{
state= {
apiurl:'http://www.omdbapi.com/.............................',
s:'',
results: [],
selected:{}
}
searchFunc(s) {
this.setState({s: s})
axios(this.state.apiurl+ "&s="+s).then(response =>
this.setState({results: response.data.Search[0]}));
console.log(this.state.results)
}
render() {
return(
<View style={{flex:1,backgroundColor:'#356292'}}>
<View
style={styles.sectionContainer}>
<View style={styles.section}>
<TextInput style={styles.section2}
onChangeText = {(s) => this.searchFunc({s})}
value={this.state.s}
placeholder="Movies,Series.."
>
</TextInput>
<TouchableOpacity
style={{justifyContent: 'center', alignItems: 'center'}}
onPress={() => this.searchFunc()}>
<Image
source ={require('../img/seach.png')}
style={{width:width*0.05,height:height*0.03}}
>
</Image>
</TouchableOpacity>
</View>
</View>
<ScrollView style={styles.scroll}>
{this.state.results.map(results=>(
<View key={this.state.results.imdbID}
style={styles.scroll2}>
<Image source={{uri: this.state.results}}
style={{width:width*0.3, height:height*0.4}}>
</Image>
<Text style={styles.heading}>
{this.state.results.Title}
</Text>
</View>
))}
</ScrollView>
</View>
);
}
From the comments from your original post, i'm guessing response.data.Search[0] is also an array. If so your results state update is okay. Otherwise you should set the results state to response.data.Search.
Other problem I noticed in your code is in the map function, you are mapping the array with each item refering to the result variable, but in your jsx, you are trying to access the results state variable. It should be
<ScrollView style={styles.scroll}>
{
this.state.results.map(result => (
<View
key={result.imdbID}
style={styles.scroll2}
>
<Image
source={{uri: result.image}} // use correct key from result object
style={{width:width*0.3, height:height*0.4}}
/>
<Text style={styles.heading}>{result.Title}</Text>
</View>
))
}
</ScrollView>
Also in your Textinput onChangeText callback function, you dont have to pass that value as an object. You can change it to
<TextInput
style={styles.section2}
onChangeText={(s) => this.searchFunc(s)}
value={this.state.s}
placeholder="Movies,Series.."
/>
I quess you are supposed to pass Search to the state and not the Search[0], which is the object and not map, the reason map function is not working on it.
axios(this.state.apiurl+ "&s="+s).then(response =>
this.setState({results: response.data.Search}));
console.log(this.state.results)
Coincidently, I have created an app using same movie API, you can find it here: Github Repo, Movie App
Code:
<View style={mainContainerStyle}>
<View style={style1}>
{View1}
</View>
<View style={style2}>
{View2}
</View>
<View style={style3}>
{View3}
</View>
<View style={style4}>
{View4}
</View>
</View>
In this case, I want to check: style1, style2, style3, style 4. These are child styling properties.
If I find any style { flexDirection: 'row' }, I should make it 'row-reverse'. How to achieve this? Please help me.
I think you can use a function to do that specific logic
function format(style) {
if (style.flexDirection === 'row') {
return Object.assign({}, style, { flexDirection: 'row-reverse' });
}
return style;
}
and wrap it up:
<View style={mainContainerStyle}>
<View style={format(style1)}>
{View1}
</View>
<View style={format(style2)}>
{View2}
</View>
<View style={format(style3)}>
{View3}
</View>
<View style={format(style4)}>
{View4}
</View>
</View>
I installed react-native-swiper and I swipe 3 full screen views and everything is okay, but I have to swipe images from an API, I'll receive images from an API. I dont know how to display it, because the number of images will change everytime I can't put my images in my project
I have to utilize flatList in one view or what ?
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
<View style={styles.slide1}>
<Text style={styles.text}>Dima Arcol 1</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Dima Arcol 2</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Dima Arcol 3</Text>
</View>
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);
You can iterate over your data using map.
lets say your data is
data = [
{
text: 'imageheading',
image: 'yoururl'
},
...
];
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
{this.data.map((data) => {
return(
<View style={styles.slide3}>
<Text style={styles.text}>{data.text}</Text>
<Image src={{ uri: data.image }}/>
</View>
);
})}
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);
I have already tried backgroundColor but for no success.
I have the following code and want to apply background color to the main parent View but dont want to specify any padding, how to acheive this?
<View style={{flex:1,alignItems:'center'}}>
<Text>
No new Transactions
</Text>
<View style={{backgroundColor:'#fc004f',paddingTop:44,paddingBottom:40,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd'}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Big Bazaar</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
<View style={{flex:1,backgroundColor:'#401f80',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>Zomato Inc</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
<View style={{flex:1,backgroundColor:'#fc004f',padding:44,top:56,borderRadius:8,width:window.width-20,borderWidth:2,borderColor:'#dddddd',marginTop:10}}>
<Text style={{position:'absolute',fontSize:16,top:14,paddingLeft:16,color:'white',fontWeight:'bold'}}>OLA Inc</Text>
<Text style={{position:'absolute',fontSize:14,top:48,paddingLeft:16,color:'white',fontWeight:'bold'}}>View Receipt</Text>
</View>
</View>
Remove flex:1 from the children views, and add backgroundColor to the parent view. Hope this helps!