I created a modal using react-native-modal-selector, but there is not any props or method defined to add the Images or Icons in the react-native-modal-selector document. Is there any other way to add the Images or Icon in the react-native-modal-selector?
You can try this as per docs :
[{
key: 5,
label: 'Red Apples',
component: <View style={{backgroundColor: 'red'}}><Text style={{color: 'white'}}>Red Apples custom component ☺</Text></View>
}]
Like have a field named component and add your data
The docs are not as straightforward for this point, but after playing around a bit, this worked for me:
let data = categories.map((category, index) => (
{
key: category.id,
label: category.name,
component: <View style={styles.row}><Image style={styles.image} source={{ uri: category.icon }} /><Text>{category.name}</Text></View>,
accessibilityLabel: category.name
}))
Related
I am using react-native-swiper-flatlist.Swiper and dots from swiper are there but images are not showing. I am pretty new to react-native. This is my code:
<SwiperFlatList
autoplay
autoplayDelay={2}
autoplayLoop
index={2}
showPagination
data={img}
renderItem={({ item }) =>{
return(
<Image style={{width, height: 200, backgroundColor:"#f0ffff" }} source={{uri:item.uri}}/>
)
} }
/>
First try to keep your SwiperFlatList inside View Component & Style Should be flex:1.
Double check what is your Data format & how you render inside Image.
Otherwise Please Share Full Source Code.
Your image data is not from the web, this is local data so use this code :
<Image style={{width, height: 300, backgroundColor:"#f0ffff",flex: 1 }} source={item.uri}/>
instead of
<Image style={{width, height: 300, backgroundColor:"#f0ffff",flex: 1 }} source={{uri:item.uri}}/>
also change data formate :
const img=[
{uri:'../../assets/image.png', key: '1'},
{uri:'../../assets/image.png', key: '2'},
{uri:'../../assets/image.png', key: '3'}
];
to
const img=[
{uri:require('../../assets/image.png'), key: '1'},
{uri:require('../../assets/image.png'), key: '2'},
{uri:require('../../assets/image.png'), key: '3'}
];
<FlatList
data={[
{id: '1'},
{name: 'snus'},
{pris: '32'},
]}
renderItem={({item}) => <View style={styles.item}>
<Text>{item.pris}{item.name}{item.id}</Text>
</View>}
/>
When i render the items like this, they get properly formatted and each view is rendered as a listitem: click here for visual confirmation.
however, when i add descriptive text in front of each JSX element, it gets rendered for all the listitems, like this.
Code:
renderItem={({item}) => <View style={styles.item}>
<Text>pris: {item.pris}</Text>
</View>}
how do i solve this conceptually?
Your renderItem prop
renderItem={({item}) => <View style={styles.item}>
<Text>pris: {item.pris}</Text>
</View>}
is properly formatted.
The problem is the array of data that you're passing to the FlatList. Each item is supposed to have id, name and pris props. Instead you are creating an array with three objects, once per prop.
I think your intention is to give an array with this structure instead:
[{id: '1', name: 'snus', pris: '32'}, { id: '2', name: 'snus_2', pris: '23'}]
As part of a FlatList, I render each ListItem (from the react-native-elements library) where I try to display an avatar (icon) from a url to a photo:
<ListItem
avatar={{ source: { uri: item.icon } }}
/>
All the other props display fine but on the left side of each cell I just get a grey box. I've logged the value of item.icon and it points to a valid photo. Do I need to download the photo and then provide a local link to it?
How can I get the photo to show up as the cell's avatar?
You're using the wrong object for the image avatar.
Stable Version
Either
avatar={{ uri: item.icon }}
OR
avatar={<Avatar
rounded
source={{uri: item.icon}}
title={'Sample Title'}
/>}
Beta Version
leftAvatar={{ source: { uri: item.icon } }}
According to react-native-elements they have leftAvatar and no just avatar
<ListItem
key={i}
leftAvatar={{ source: { uri: l.avatar_url } }}
title={l.name}
subtitle={l.subtitle}
/>
This is what I did to customize my leftAvatar with icons (react-native-elements / flatlist)
leftAvatar={{
icon: { name: item.icon, type: "ionicon", color: "black" },
size: "large",
overlayContainerStyle: { backgroundColor: "white" }
}}
I'm using a NavigatorIOS for the routing of my app. I would like to display just the back button without any title or bar even translucent.
Is it possible ?
Or I must use another module ?
Currently, I have this :
<NavigatorIOS
ref='nav'
tintColor="white"
style={{flex: 1}}
initialRoute={{
title: 'Splash',
navigationBarHidden: true,
component: SplashScene
}}/>
Thanks a lot for your help,
Margot
You can pass translucent prop to NavigatorIOS's route, like so:
<NavigatorIOS
ref='nav'
tintColor="white"
style={{flex: 1}}
initialRoute={{
title: 'Splash',
navigationBarHidden: true,
translucent: true,
component: SplashScene
}}
/>
I have created an app which uses the Navigator component, I'm wondering is there a way I can implement a header and footer component outside of the scene?
A screenshot of what I have currently:
http://i.stack.imgur.com/XHDKC.png
This first attempt was accomplished by making the header and footer a single component with absolute styles.
//index.js
<Navigator initialRoute={{id: 'home', title: window.title}}
renderScene={renderScene}
navigationBar={<DefaultHeader toggleSideMenu={this.toggleSideMenu}
route={route.id} />}/>
//DefaultHeader.js
<View style={styles.navContainer}>
<View style={styles.header}>
</View>
<View style={styles.footer} shouldUpdate={false}>
</View>
</View>
Although appeared to work, I was unable to click around anything within the scene due to the render order in React's Navigator component.
I decided to re-think my approach and fully separated navigation bars from the Navigator component. This relies on you passing down a routing function and any other route info.
routeTo: function (route) {
if (route.to == "back") {
this.refs.navigator.pop();
} else {
this.refs.navigator.push(route);
}
},
canGoBack: function () {
return this.refs.navigator && this.refs.navigator.getCurrentRoutes().length > 1
},
getDefaultRoute: function () {
return {id: 'home', title: window.title};
},
getCurrentRoute: function () {
if (this.refs.navigator) {
return _.last(this.props.navigator.getCurrentRoutes());
}
return this.getDefaultRoute();
},
render() {
return (
<View style={styles.container}>
<DefaultHeader routeTo={this.routeTo} route={this.getCurrentRoute()}
toggleSideMenu={this.toggleSideMenu}/>
<Navigator
ref="navigator"
initialRoute={this.getDefaultRoute()}
renderScene={renderScene}
/>
<DefaultFooter routeTo={this.routeTo} route={this.getCurrentRoute()}/>
</View>
)
}
Although it is pretty "hacky" - why don't you add a third view (expanding fully) between the header and footer and set onStartShouldSetResponder and onMoveShouldSetResponder to return false for both: the middle view and the navContainer view). See https://facebook.github.io/react-native/docs/gesture-responder-system.html. I am not sure if it will work but it might be worth trying.
The best way, however, would be to modify the Navigator component and add footer props and displaying there. It's pure javascript, so it should be fairly easy to do.
I am using RN 0.36 and I was able to workaround this by using the navigator height to margin the footer:
<View style={{flex: 1}}>
<ScrollView>
...
</ScrollView>
<View style={{
height: 40,
borderTopWidth: 1,
borderTopColor: colors.grey,
flex: 0,
marginBottom: Navigator.NavigationBar.Styles.General.TotalNavHeight
}}>
<Text>Footer</Text>
</View>
</View>
where my index files (ie index.ios.js) looks like
<NavigatorIOS
style={{flex: 1}}
initialRoute={{
title: ' ',
component: Main
}}
...
Check NavigatorIOS and Navigator