I'm a beginner in React Native ans struggling with adding Input (Search bars) into a list by clicking a button. Here's my code:
import React, { useState } from "react";
import {
View,
Text,
Button,
FlatList
} from 'react-native'
import InputDemo from '../components/InputDemo'
const INCREMENT = 1;
class AddInputDemo extends React.Component{
constructor(props){
super(props);
this.state={
counter: 0,
numOfInput: [0]
}
this.addInput = this.addInput.bind(this)
}
addInput(){
this.setState((state) => ({
counter: state.counter + INCREMENT,
numOfInput: [...state.numOfInput, state.counter]
}))
console.log(this.state.counter);
console.log(this.state.numOfInput);
}
render(){
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<FlatList
data={this.state.numOfInput}
keyExtractor={(item, index) => item.id}
renderItem={itemData => {
<InputDemo/>
}}
/>
<Button title='Add a location' onPress={this.addInput} />
</View>
);
}
}
export default AddInputDemo;
Here's the InputDemo file:
import * as React from 'react'
import {
View,
Text,
TextInput,
Button
} from 'react-native'
const InputDemo = props => {
return(
<View style={{borderColor: 'black', borderWidth: 1}}>
<TextInput
placeholder='Search'
/>
</View>
)
}
export default InputDemo;
It's weird since I use this same logic with state in Functional Component. It works. But when applying to a Class Component, it does not show anything when I click that button.
THANKS FOR ANY HELP !!!
EDIT
I tried to use extraData:
<FlatList
extraData={this.state.numOfInput}
keyExtractor={(item, index) => item.id}
renderItem={itemData => {
<InputDemo
id={itemData.item.id}
/>
}}
/>
And created an id for each InputDemo:
const InputDemo = props => {
return(
<View key={props.id} style={{borderColor: 'black', borderWidth: 1}}>
<TextInput
placeholder='Search'
/>
</View>
)
}
But it still does not work
Please help !!!
FlatList data attribute takes prop as Array. Documentation is your bestfriend.
Everything goes more or less like below, not tested but closer to what you want, I hope.
import React, { useState } from "react";
import {
View,
Text,
Button,
FlatList
} from 'react-native'
import InputDemo from '../components/InputDemo'
const INCREMENT = 1;
class AddInputDemo extends React.Component{
constructor(props){
super(props);
this.state={
counter: 0,
numOfInput: [0],
item:'',
searchArray:[],
}
this.addInput = this.addInput.bind(this)
}
addInput(){
this.setState((state) => ({
counter: state.counter +=1,
searchArray:[...this.state.searchArray, this.state.item] //appends search item to search array
numOfInput: [...state.numOfInput, state.counter] //don't know why you need this
}))
}
render(){
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<InputDemo search={(searchItem)=>this.setState({item:searchItem})}/>
<FlatList
data={this.state.searchArray}
keyExtractor={(item, index) => item.id}
renderItem={itemData => {
<Text>{itemData}</Text>
}}
/>
<Button title='Add a location' onPress={this.addInput} />
</View>
);
}
}
export default AddInputDemo;
And Input Demo
import * as React from 'react'
import {
View,
TextInput
} from 'react-native'
const InputDemo = props => {
const onChangeText = (item) => {
props.search(item); //add search item to state of "class AddInputDemo" using props
}
return(
<View style={{borderColor: 'black', borderWidth: 1}}>
<TextInput
placeholder='Search'
onChangeText={text => onChangeText(text)}
/>
</View>
)
}
export default InputDemo;
EDIT 2
Hi guys, I know where the error is now. It's not about the data or extraData. The solution is we have to wrap around the <InputDemo/> with a return statement. It works well then. Thank you all for the helpful answers.
You should pass extraData
A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.
<FlatList
data={this.state.numOfInput}
extraData={counter}
keyExtractor={(item, index) => item.id}
renderItem={itemData => (
<InputDemo/>
)}
/>
Edit:
You also have a huge problem, your data don't have .id prop and keyExtractor probably isn't working.
You could change it to
keyExtractor={(item, index) => index.toString()}
But this still isn't good, try adding unique id prop to each item.
After upgrading to react-native 0.61 i get a lot of warnings like that:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
What is the other VirtualizedList-backed container that i should use, and why is it now advised not to use like that?
If someone's still looking for a suggestion to the problem that #Ponleu and #David Schilling have described here (regarding content that goes above the FlatList), then this is the approach I took:
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
You can read more about this here: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
Hopefully it helps someone. :)
Just in case this helps someone, this is how I fixed the error in my case.
I had a FlatList nested inside a ScrollView:
render() {
return (
<ScrollView>
<Text>{'My Title'}</Text>
<FlatList
data={this.state.myData}
renderItem={({ item }) => {
return <p>{item.name}</p>;
}}
/>
{this.state.loading && <Text>{'Loading...'}</Text>}
</ScrollView>
);
}
and I got rid of the ScrollView by using the FlatList to render everything I needed, which got rid of the warning:
render() {
const getHeader = () => {
return <Text>{'My Title'}</Text>;
};
const getFooter = () => {
if (this.state.loading) {
return null;
}
return <Text>{'Loading...'}</Text>;
};
return (
<FlatList
data={this.state.myData}
renderItem={({ item }) => {
return <p>{item.name}</p>;
}}
ListHeaderComponent={getHeader}
ListFooterComponent={getFooter}
/>
);
}
The best way is to disable that warning because sometimes Flatlist need to be in ScrollView.
UPDATE RN V0.63 ABOVE
YellowBox is now changed and replace with LogBox
FUNCTIONAL
import React, { useEffect } from 'react';
import { LogBox } from 'react-native';
useEffect(() => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])
CLASS BASED
import React from 'react';
import { LogBox } from 'react-native';
componentDidMount() {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}
UPDATE RN V0.63 BELOW
FUNCTIONAL
import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';
useEffect(() => {
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, [])
CLASS BASED
import React from 'react';
import { YellowBox } from 'react-native';
componentDidMount() {
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}
Data
// dummy data array
const data = [
{id: 1, name: 'Tom'},
{id: 2, name: 'Jerry'},
]
Solution #1
You can make a custom component for that like this
const VirtualizedList = ({children}) => {
return (
<FlatList
data={[]}
keyExtractor={() => "key"}
renderItem={null}
ListHeaderComponent={
<>{children}</>
}
/>
)
}
then use this VirtualizedList as parent component:
...
return (
<VirtualizedList>
<FlatList
data={data}
keyExtractor={(item, index) => item.id + index.toString()}
renderItem={_renderItem}
/>
<AnyComponent/>
</VirtualizedList>
)
Solution #2
If you use FlatList inside the ScrollView it gives warning which is annoying, so you can use array's map property, like this -
NOTE: It is not recommended way to show list. If you have small amount of that then you can use it that's totally fine, but if you want to show a list which get data from api and have lot's of data then you can go with other solutions. if you use map with large data then it affect your app performance
<ScrollView>
{data.map((item, index) => (
<View key={index}>
<Text>{item.name}</Text>
</View>
))}
</ScrollView>
Solution #3
if you make your FlatList horizontal (as per your need) then also warning will disappear
<ScrollView>
<FlatList
data={data}
keyExtractor={(item, index) => item.id + index.toString()}
horizontal={true}
/>
</ScrollView>
Solution #4
you can add header and footer component
In ListHeaderComponent and ListFooterComponent you can add any component so you don't need parent ScrollView
<FlatList
data={data}
keyExtractor={(item, index) => item.id + index.toString()}
ListHeaderComponent={headerComponent}
ListFooterComponent={footerComponent}
ListEmptyComponent={emptyComponent}
ItemSeparatorComponent={separator}
/>
// List components
const headerComponent = () => (
<View>
<Header/>
<Any/>
</View>
)
const footerComponent = () => (
<View>
<Footer/>
<Any/>
</View>
)
const emptyComponent = () => (
<View>
<EmptyView/>
<Any/>
</View>
)
const separator = () => (
<View style={{height: 0.8, width: '100%', backgroundColor: '#fff'}} />
)
The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated
By the way SafeAreaView doesn't work for me, the only way to solve is
<ScrollView>
{data.map((item, index) => {
...your code
}}
</ScrollView>
The error disappears
Looking at the examples in docs I've changed container from:
<ScrollView>
<FlatList ... />
</ScrollView>
to:
<SafeAreaView style={{flex: 1}}>
<FlatList ... />
</SafeAreaView>
and all those warnings disappeared.
In my case, I needed to have FlatLists nested in a ScrollView because I am using react-native-draggable-flatlist to move ingredients and steps around in a recipe.
If we read the warning properly, it says that we should use another VirtualizedList-backed container to nest our child FlatList in. What I did is:
/* outside the component */
const emptyArry = []
/* render */
<FlatList
scrollEnabled={false}
horizontal
data={emptyArray}
ListEmptyComponent=(<DraggableList />)
/>
No more warning, and I think this is the pattern recommended by the warning.
<ScrollView horizontal={false} style={{width: '100%', height: '100%'}}>
<ScrollView horizontal={true} style={{width: '100%', height: '100%'}}>
<FlatList ... />
</ScrollView>
</ScrollView>
Below code works perfectly for me to disable annoying error:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
React Native 0.68.2
<ScrollView horizontal={false} style={{flex: 1}}>
<ScrollView
horizontal={true}
contentContainerStyle={{width: '100%', height: '100%'}}>
<FlatList ... />
</ScrollView>
</ScrollView>
I tried some ways to solve this, including ListHeaderComponent or ListFooterComponent, but it all didn't fit for me.
layout I wanted to achieve is like this, and I wanted to get scrolled in once.
<ScrollView>
<View>I'm the first view</View>
<View>I'm the second view</View>
<MyFlatList />
</ScrollView>
First I want to say thanks to this issue and comments, which gave me bunch of ideas.
I was thinking of ListHeaderComponent places above the Flatlist, but since my Flatlist's direction was column, the header I wanted to place went on the left of the Flatlist :(
Then I had to try on VirtualizedList-backed thing. I just tried to pack all components in VirtualizedList, where renderItems gives index and there I could pass components conditionally to renderItems.
I could have worked this with Flatlist, but I haven't tried yet.
Finally it looks like this.
<View>
<Virtualizedlist
data={[]}
initialNumToRender={1}
renderItem={(props)=>{
props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
}}
keyExtractor={item => item.key}
getItemCount={2}
getItem={ (data, index) => {
return {
id: Math.random().toString(12).substring(0),
}
}}
/>
</View>
(inside which lazyly renders↓)
<View>I'm the first view</View>
<View>I'm the second view</View>
<MyFlatList />
and of course able to scroll the whole screen.
As #Brahim stated above, setting the horizontal property to true seem to resolve the issues for a FlatList embedded in a ScrollView.
So I faced the same problem while using a picker-based component inside <ScrollView> and the one thing that helped me solve the problem was adding
keyboardShouldPersistTaps={true} inside the <ScrollView> as a prop.
This is my code snippet.
<ScrollView keyboardShouldPersistTaps={true}>
<SelectionDD studentstatus={studentStatus}/>
<SearchableDD collegeNames={collegeNames} placeholder='University'/>
</ScrollView>
I have two Flatlist; each of them has many Item also has a feature to collapse and expand.
Because of that, I can't use SafeAreaView.
I saw another solution and found a new way.
I define one Flatlist in the core component ( without Scrollview) and render each Flatlist with a map function inside ListHeaderComponent and ListFooterComponent.
<View style={{flex: 1}}>
<FlatList
style={{backgroundColor: 'white'}}
refreshing={loading}
onRefresh={() => sample()}
ListHeaderComponent = {
<View>
{collapse/expandComponent}
{this.state.sample1&& content1.map((item, index) => this.renderList1(item,index))}
</View>
}
ListFooterComponent = {
<View>
{collapse/expandComponent}
{this.state.sample2 && content2.map((item, index) => this.renderlist2(item,index))}
</View>
}
/>
</View>
In my opinion i can use map instead of FlatList. But in my case i wan't to show large list. Not using FlatList may cause performance issue. so i used this to suppress warning https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509
Without hiding YellowBox you still can implement scroollable view inside scrollable view. You can use this library. It replace the default Scrollview from React Native.
This may help someone down the line, be sure you to check how your components are nested. Removing the ScrollView from the top component fixed the issue.
I ran into this issue because I had two components nested like this essentially:
Component 1
<ScrollView>
<OtherStuff />
<ListComponent />
</ScrollView>
My second component 'ListComponent' had a FlatList already wrapped with SafeAreaView.
<SafeAreaView style={styles.container}>
<FlatList
data={todoData}
renderItem={renderItem}
ItemSeparatorComponent={() => <View style={styles.separator} />}
keyExtractor={item => item.id.toString()}
/>
</SafeAreaView>
In the end I replaced the ScrollView from the first component with a View instead.
Use flatList like this ListHeaderComponent and ListFooterComponent:
<FlatList ListHeaderComponent={
<ScrollView
style={styles.yourstyle}
showsVerticalScrollIndicator={false}
>
<View style={styles.yourstyle}>
</View>
</ScrollView>
}
data={this.state.images}
renderItem={({ item, index }) => {
return (
<View
style={styles.yourstyle}
>
<Image
source={{
uri: item,
}}
style={styles.yourstyle}
resizeMode={"contain"}
/>
<Text
numberOfLines={2}
ellipsizeMode="tail"
style={styles.yourstyle}
>
{item.name}
</Text>
</View>
);
}}
keyExtractor={({ name }, index) => index.toString()}
ListFooterComponent={
<View style={styles.yourstyle}></View>
}
/>
If you use ScrollView and FlatList together you'll get inconsistent scroll behaviour.
So just remove ScrollView and use FlatList in a View.
<View flex={1}>
<FlatList
data={list}
renderItem={({ item }) => this.renderItem(item) }
keyExtractor={item => item.id}
/>
</View>
import React from 'react';
import { FlatList, ScrollViewProps } from 'react-native';
export const ScrollView: React.FC<ScrollViewProps> = props => {
return (
<FlatList
{...props}
data={[]}
renderItem={() => null}
ListHeaderComponent={() => (
<React.Fragment>{props.children}</React.Fragment>
)}
ListEmptyComponent={null}
keyExtractor={() => 'blank'}
/>
);
};
This will essentially work exactly like a ScrollView except without this error.
I was having this issue using a scrollview as parent view, and nesting a SelectBox from react-native-multi-selectbox package. I was able to solve this by adding listOptionProps={{nestedScrollEnabled: true}} like this:
<ScrollView>
<SelectBox
label="Select single"
options={serverData}
listOptionProps={{nestedScrollEnabled: true}}
value={input.elementSelected}
onChange={event =>
inputHandlerLang('elementSelected', event, key)
}
hideInputFilter={false}
/>
</ScrollView>
the error still present but scrolling within SelectBox works as well as within the parent scrollview. I also do have to suppress the error with LogBox. I don't know if there are any drawbacks to this but I'll try to test this more.
Update 1: this used to work in v0.68.2, but since I updated to patch v0.68.5, the warning became an error.
You have to remove ScrollView and enable scroll from FlatList using the property scrollEnabled={true}, you can place the other views inside ListHeaderComponent and ListFooterComponent
<View flex={1}>
<FlatList
data={data}
scrollEnabled={true}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<Text>{item.label}</Text>
)}
keyExtractor={item => item.id}
ListHeaderComponent={() => (
<Text>Title</Text>
)}
ListFooterComponent={() => (
<Text>Footer</Text>
)}
/>
</View>
Actually as I know, using nested VirtualizedLists, caused always performance issues, just the warning to that issue is new. I tried everything I found on the internet, non of them helped. I use now ScrollView or when you just have a normall View with maxHeight then you will be able to scroll if the content-height is bigger then the maxHeight of you View.
So:
<ScrollView>
{items.map((item, index) =>
<YourComponent key={index} item={item} />
)}
</ScrollView>
Or just:
<View style={{maxHeight: MAX_HEIGHT}}>
{items.map((item, index) =>
<YourComponent key={index} item={item} />
)}
</View>
This error disappeared because of using FlatList inside ScrollView. You can write like the following code.
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View>
<Header />
</View>
{(list.length == 0) &&
<View style={{flex:1, margin: 15}}>
<Text style={{textAlign: 'center'}}>No peripherals</Text>
</View>
}
<FlatList
data={list}
renderItem={({ item }) => this.renderItem(item) }
keyExtractor={item => item.id}
/>
</View>
</SafeAreaView>
You can add horizontal=True and contentContainerStyle={{ width: '100%' }} to the ScrollView parent.
<ScrollView
style={styles.collaborators}
contentContainerStyle={{ width: '100%' }} <--
horizontal <--
>
<FlatList
data={list?.slice(0, 10) || []}
keyExtractor={item => item.cc}
ItemSeparatorComponent={Separator}
renderItem={({ item }) => (
<Collaborator name={item.name} cc={item.cc} />
)}
/>
</ScrollView>
This worked for me (as a bit of a hack). Use a FlatList with empty data and null renderItem props instead of using a ScrollView
const emptyData = [];
const renderNullItem = () => null;
const App = () => {
const ListFooterComponent = (
<FlatList ... />
);
return (
<SafeAreaView>
<FlatList
data={emptyData}
renderItem={renderNullItem}
ListFooterComponent={ListFooterComponent}
/>
</SafeAreaView>
);
};
I had the same issue, and just got rid of it by removing the ScrollView around the FlatList. Because by default FlatList provides Scroll Functionality based on the length of content that it renders. 😊
I'm trying to add a searchable list to my React Native app, but encounter a problem whilst trying to render the list itself. The error is the old "You likely forgot to export your component from the file its defined in, or you might have mixed up default and named imports". I'm sure this may be my issue, but after reading several variations of the issue online, I can't seem to figure out where the issue is.
I've tried changing every and any used import in the fashion of listing them one by one, using and removing the brackets. I tried reinstalling react-native-elements, and checked my dependencies for correct versions. Also tried rendering list without data.
List component:
Liste.js
import { View, Text, FlatList } from "react-native";
import {List, ListItem } from "react-native-elements"
class Liste extends Component {
constructor(props) {
super(props);
...
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
avatar={{ uri: item.picture.thumbnail }}
/>
)}
/>
</List>
</View>
);
}
}
export default Liste;
I expected the list to render at all, it doesnt.
First, you need to remove the List component, because the react-native-elements does not contain it.
The second thing that you need to do is to remove alignItems: "center", justifyContent: "center" from the View component.
Also, in the FlatList component, the property avatar is wrong. You have to choose between: leftAvatar and rightAvatar.
You comonent should like look this:
<View style={{ flex: 1 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={item.title}
subtitle={item.body}
leftAvatar={{
source: item.thumbnail && { uri: item.thumbnail },
}}
/>
)}
/>
</View>
Here is a working demo.
When I use the package react-native-modalbox with a FlatList (each list item can spawn a distinct modal when tapped), the modal that is spawned only fills the area of the list item instead of going full screen like it normally should.
A working snack that shows the issue is here:
https://snack.expo.io/BkICbjwWQ
For completeness I'll paste the code in here as well:
import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList, Button } from 'react-native';
import { Constants } from 'expo';
import Modal from "react-native-modalbox";
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // Version can be specified in package.json
export default class App extends Component {
render() {
let myRefs = [];
return (
<View style={styles.container}>
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <View>
<Modal
style={[styles.modal]}
ref={(modalItem) => {myRefs[item.key] = modalItem;} }
swipeToClose={true}
onClosed={this.onClose}
onOpened={this.onOpen}
onClosingState={this.onClosingState}>
<Text style={styles.text}>Basic modal</Text>
</Modal><Text>{item.key}</Text><Button title="Basic Modal" onPress={() => myRefs[item.key].open()} style={styles.btn}>Basic modal</Button></View>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
I basically have the same question/problem as (react-native-modalbox stuck in child component context) but there was no answer to that question and he did not provide enough details with a minimum working example.
Your modal component is inside the rendered item. This causes it to be bound to the item. Although you can fix this issue by using appropriate props or some custom styling, this is not efficient. You would have 1000 modal components if you had 1000 items in your list.
You should move out your modal component and make it sibling to the FlatList. This way you would have only single modal. You can change the contents of the modal with a state value.
Sample
export default class App extends Component {
render() {
let myRefs = [];
return (
<View style={styles.container}>
<Modal
style={[styles.modal]}
ref={modalItem => { myRefs['modal'] = modalItem; }}
swipeToClose={true}
onClosed={this.onClose}
onOpened={this.onOpen}
onClosingState={this.onClosingState}>
<Text style={styles.text}>Basic modal</Text>
</Modal>
<FlatList
data={[{ key: 'a' }, { key: 'b' }]}
renderItem={({ item }) => (
<View>
<Text>{item.key}</Text>
<Button
title="Basic Modal"
onPress={() => myRefs['modal'].open()}
style={styles.btn}>
Basic modal
</Button>
</View>
)}
/>
</View>
);
}
}
So im making an app and this is my code:
import React, { Component } from 'react';
import {
View,
Text,
TabBarIOS,
StyleSheet,
Dimensions
} from 'react-native';
//import Styles from './LayoutStyle.js';
class Layout extends Component {
constructor(){
super()
this.state = {selectedTab: 'tabThree'}
}
setTab(tabId){
this.setState({selectedTab: tabId})
}
render() {
return(<View style={Styles.Layout}>
<TabBarIOS>
<TabBarIOS.Item
systemIcon='history'
selected={this.state.selectedTab === 'tabOne'}
onPress={() => this.setTab('tabOne')}>
<View>
<Text>Jure1</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon='bookmarks'
selected={this.state.selectedTab === 'tabTwo'}
onPress={() => this.setTab('tabTwo')}>
<View>
<Text>Jure2</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon='more'
selected={this.state.selectedTab === 'tabThree'}
onPress={() => this.setTab('tabThree')}>
<View>
<Text>Jure3</Text>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
);
}
}
const Styles = StyleSheet.create({
Layout: {
alignItems: "center",
justifyContent: "center",
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
},
TabBar: {
backgroundColor: 'grey'
}
});
export default Layout;
Well what i expected was an app where you have a TabBar on the bottom with three different items to choose from and it should look like i would in a native ios app. Well thats not the case, what i get is this:
Well what should i do? How do i style this item to not overlap? Any ideas?
The layout style is causing the inner content to get centred oddly, change Layout style to this:
Layout: {
flex:1,
}
Additionally, when trying to draw a scene from the tab clicked you will want to use a render function inside the TabBarIOS.Item object, react native provides some good examples of how to do this in the documentation: https://facebook.github.io/react-native/docs/tabbarios.html
I would highly recommend placing a navigator for each object which allows you to have much more control over the scene changes:
<TabBarIOS.Item
systemIcon='history'
title= 'Jure1'
selected={this.state.selectedTab === 'tabOne'}
onPress={() => this.setTab('tabOne')}>
<View style = {{flex:1}}>
<Navigator
renderScene={this._renderScene}
/>
</View>
</TabBarIOS.Item>