New to react native, trying to place text-box above scrollable tab view
export default React.createClass({
render() {
return
<View>
<TextInput
style={{height: 50}}
placeholder="Enter!"
onChangeText={(searchText) => this.setState({searchText})}/>
<ScrollableTabView
style={{marginTop: 10, }}
initialPage={1}
renderTabBar={() => <FacebookTabBar />}
>
<ScrollView tabLabel="ios-search" style={styles.tabView}>
<View style={styles.card}>
<TextInput
style={{height: 50}}
placeholder="Enter!"
onChangeText={(searchText) => this.setState({searchText})}/>
</View>
</ScrollView>
</ScrollableTabView>
</View>
;
},
});
Scrollable tab view doesn't show up with above code, I am unable to understand why, please advice. I am trying to make something like Linkedin app.
<ScrollableTabView> is styled with flex: 1, so you need to explicitly set flex: 1 to its parent like this in order to show it:
return (
<View style={{flex: 1}}>
...
</View>
);
Here is a quote from React Native documentation regarding Flex:
A component can only expand to fill available space if its parent has
dimensions greater than 0. If a parent does not have either a fixed
width and height or flex, the parent will have dimensions of 0 and the
flex children will not be visible.
Related
I have placed a Dropdown picker above a ScrollView, when both Dropdown picker and ScrollView is poppulated with data and I'm trying to scroll through the data in Dropdown it instead scrolling the ScrollView in the background.
Infact the Dropdown isn't scrolling at all, even if there's no ScrollView in the background, I'm not sure what I'm doing wrong.
<View style={styles.lowerContainer}>
{sevaListDrop ? (
<>
<View // specific search section
style={[styles.searchContainer, {zIndex: 2, marginBottom: '2%'}]}>
<DropDownPicker // dropdown
style={{borderColor: '#ccc'}}
containerStyle={{flex: 3, marginLeft: '2%'}}
dropDownContainerStyle={{
borderColor: '#ccc',
zIndex: 1000,
elevation: 1000,
position: 'absolute',
}}
open={openDrop}
setOpen={setOpenDrop}
items={sevaListDrop?.map(item => ({
label: item.sevaName,
value: item.calendarId,
}))}
placeholder="Select Seva"
value={calendarId}
setValue={type => setCalendarId(type)}
/>
<PrimaryButton // search button
name="Search"
action={search}
/>
</View>
<View // lower container for seva list
style={[styles.lowerContainer, {justifyContent: 'center'}]}>
{sevaList ? (
<ScrollView // seva list
style={{width: '100%'}}
contentContainerStyle={{
alignItems: 'center',
paddingBottom: 50,
}}
showsVerticalScrollIndicator={false}>
{sevaList?.map((item, index) => (
<SevaCard // seva card
key={index}
sevakName={item.sevakName}
bookedBy={item.bookedBy}
noOfAttendees={item.noOfAttendees}
onChangeText={text => {
setPeopleCount(item.slotId, text);
}}
onPress={() =>
updateAttendees(item.slotId, item.calendarId)
}
/>
))}
</ScrollView>
) : noDataInner ? (
<CautionSection // no data container
title="No Data Found"
icon="no_user_found"
/>
) : (
<CautionSection // default container
title="Search Patron Id"
icon="search"
/>
)}
</View>
</>
) : (
<View // lower caution container
style={[styles.lowerContainer, {justifyContent: 'center'}]}>
{noData ? (
<CautionSection // no data container
title="No Data Found"
icon="no_user_found"
/>
) : noConnection ? (
<CautionSection // no connection container
title="No Connection"
icon="no_connection"
/>
) : (
<CautionSection // default container
title="Search Patron Id"
icon="search"
/>
)}
</View>
)}
</View>
What is really causing this problem is the zIndex:2 in the <View> // specific search section. If you erase that zIndex you should stop having this problem.
At the same time, you may have a problem with your Dropdown, because you will not see the options anymore (or the Dropdown itself). To solve this you should have your <View // lower container for seva list component inside your <View // specific search section component, and then add a zIndex:0 in that last <View> like this:
<View> // specific search section
<DropdownPicker zIndex={1000}></DropdownPicker>
<PrimaryButton></PrimaryButton>
<View style={{zIndex:0}}>
<ScrollView>
<SevaCard></SevaCard>
</ScrollView>
</View>
</View>
As you can see, I also added a zIndex as an attribute of the element, since it is allowed in DropdownPicker, and preferred.
I have a screen with the following structure:
<ScrollView>
<View style={styles.container}>
<View style={styles.topPanel} />
<View style={styles.titleSection}>
<View>
<Image style={styles.profilePicture} source={logos} />
</View>
<View style={styles.textComponent}>
<TextComponent
boldness="extraBold"
style={styles.titleSection__title}>
...
</TextComponent>
<TextComponent
boldness="semiBold"
style={styles.titleSection__text}>
...
</TextComponent>
</View>
<View style={styles.verticalLine} />
<RatingAndLocation location={6} medianRating={4.2} />
<View>
<TextComponent
boldness="semiBold"
style={styles.titleSection__desc}>
...
</TextComponent>
</View>
<View style={styles.verticalLine} />
</View>
</View>
<TabView images={images} setGalleryIndex={setGalleryIndex} />
</ScrollView>
Tabview component contains react-native-tabview tabs that are scrollViews with content in it. I'm trying to set scrollView's scroll position like that:
navigation.addListener('blur', () => {
scrollViewRef.scrollTo({ y: 0, x: 0, animated: true });
});
But it doesn't work. Nested scrollViews are not working. They don't fire onScroll event. Only the parent scrollview does that. I want to know if there is a way around this issue.
As I understand, you can't nest vertical scrollViews, but how else can you make each tab an individual scrollView and scroll to the top of it when changing index?
Here is how it all should look like:
I am making a UI design in react native i have made a card of categories i want to increase the width of view if category name is long. but i am not understanding how to do that.Please help here is my code.
<View style={styles.CardMainView}>
<View style={styles.ThirdLayerStyle} />
<View style={styles.SecondLayerStyle} />
<View style={styles.FirstLayerStyle}>
<Image resizeMode={'contain'} style={styles.CatImageStyle}
source={require('../../Assets/Images/doccatImage.png')}
/>
</View>
<Text numberOfLines={1} style={{color:'#fff' , fontSize:15, top:28 , marginLeft:25 , marginRight:20, fontFamily: "poppinsregular"}}>Orthopaedic</Text>
</View>
</View>
CardMainView:{
flexDirection:'row',
borderRadius:4,
backgroundColor:"#1abc9c",
width:190,
height:80,
elevation:3,
shadowColor:'#000',
overflow:'hidden',
},
if you do not set width for component, that component can be resizable if the content size change.
also, I write a component which expands on height if the text size increased.
set height: 0 on state
and add this function to class for focusing on text input
focus () {
this.textInput && this.textInput.focus()
}
and add this component to return
<TextInput
{...this.props}
ref={(view) => (this.textInput = view)}
multiline
onContentSizeChange={(event) => {
if (event && event.nativeEvent && event.nativeEvent.contentSize) {
this.setState({
height: event.nativeEvent.contentSize.height
})
}
this.props.onContentSizeChange && this.props.onContentSizeChange(event)
}}
style={[this.props.style, { height: Math.max(35, this.state.height) }]}
/>
hopefully, this can help you or get an idea ;)
I think you can control your size with give a padding innermost component, when you give a padding your component will increase with your text size.
I am new to React Native so this might be a silly question.
What I am trying to get is something like this :
Where I have a parent view with 2 children, Image and Text, aligned vertically to the left. What I want is the parent view to cover only the width of its children. But instead what I get is this :
The parent view stretches to the complete width of the mobile screen.
Here is my code :
render () (<View style={{backgroundColor: '#333333'}}>
<Image source={btnImageSource} />
<Text>Some label</Text>
</View>);
Something similar to Android's 'wrap-content' width value.
You will be able to do this using flex. I found this guide to be very helpful when working with flex.
A good starting point would be to create a parent View that is flexDirection: row, justifyContent: flex-start
render () (
<View style={{justifyContent: 'flex-start', flexDirection: 'row'}}>
<View style={{backgroundColor: '#333333'}}>
<Image source={btnImageSource} />
<Text>Some label</Text>
</View>
</View>
);
Here I am trying a simple code but the scroll view is not working if kept inside another view. Code is like this:
return(
<View>
<Toolbar title={this.props.title}>
</Toolbar>
<ScrollView>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
</View>
);
But if scroll view kept as parent view it works perfectly. Code is as below:
return(
<ScrollView>
<Toolbar title={this.props.title}>
</Toolbar>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
);
Now the problem is I don't want my toolbar to scroll up and down, I just want the contents below the toolbar to move. How can I achieve that?
And next question: Is scroll view has to be parent view to be returned to work?
Use the property flexGrow in the style, flex didnt worked for me.
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
...
</ScrollView>
you should wrap toolbar in view like this:
<View><Toolbar/></View>
Wrap those component which you want to scroll inside scrollview as:
<ScrollView>your expected components...</ScrollView>
And provide flex to root view as:
<View style={{flex:1}}>
Finally your code will run as you expected.
Top <View> must has style flex:1, and also <ScrollView> has too
This was driving me crazy because I added <view> and <ScrollView> like everyone suggested but nothing worked. Then I closed the terminal then rebuild the application again using:
npx react-native run-android
Then, it started working. I hope this saves someone's sanity :)
FYI, just hitting r (or refreshing) was not working either. I had to rebuild it.
For me, Scroll View wrapped with TouchableWithoutFeedback was causing scroll view to not function at times.
I set height property for style . then it's work for me .
My code :
<View style={styles.listWrapper}>
<ScrollView >
<XYZ/>
</ScrollView>
</View>
Styles :
listWrapper:{
// flex:1,
// flexGrow:1,
width:'80%',
height:300,
},
Dont use contentContainerStyle on Scroll View Just use simple style prop for styling of scroll View . You will not face any problem.
None of these solution worked for me, after very long I found that height of a View inside the code is causing the problem so instead of
height:'50%'
I change it to
height:300
and it worked, as show below:
<ScrollView>
...
<View
style={{
flexDirection: 'row',
height: 100,
justifyContent: 'space-evenly',
height:300,
backgroundColor: '#fff',
padding: 20,
margin: 5,
}}>
...
</ScrollView>
If you are using <Form> from native base and you want to scroll
then use KeyboardAwareScrollView
<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.
</KeyboardAwareScrollView>
this will work on Android
I have solved in this way:
const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;
<View
style={{
overflow: "hidden",
flex: 1,
borderTopStartRadius: 40,
borderTopEndRadius: 40,
flexGrow: windowHeight,
}}
>
<ScrollView
contentContainerStyle={{
flexGrow: windowHeight,
backgroundColor: Colors.primary_color,
padding: 10,
}}
>
</View>
...
</ScrollView>
Update 2020-02: It will work with React.Fragment <> and </> or <React.Fragment> and </React.Fragment>. So Try this.
return(
<>
<Toolbar title={this.props.title}>
</Toolbar>
<ScrollView>
<HomeScreenTop />
<HomeScreenBottom navigator={navigator}/>
</ScrollView>
</>
);
Use react fragments instead of a View to wrap your scroll view it worked for me
<>
<ScrollView>
..........
</ScrollView>
</>
if you are using position: "absolute", delete it and try.
You can try
<SafeAreaView>
<ScrollView>
</ScrollView>
</SafeAreaView>