I am trying to create an Accordian using the component : from library:'react-native-simple-accordian'.
But when the number of accordian headers are more I can't see the ScrollView working correctly.
My code:
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
<View style={styles.container}>
<SimpleAccordion
style= {{
borderWidth:1,
borderRadius:15,
margin:3,
padding:5,
backgroundColor:'#ffffff'
}}
sections={sectionData}
renderHeader= {this.renderHeader}
renderContent={this.renderContent}
duration={1000}
touchableComponent={TouchableOpacity}
onChange={this.onChangeAccordian.bind(this)}
activeSection={this.state.open}
/>
</View>
</ScrollView>
</View>
The styles object is like this:
container: {
flex: 1,
justifyContent: 'center',
},
What styling or positioning am I doing wrong here for ScrollView?
react-native
You probably need to give style in "contentContainerStyle" prop in case of react-native ScrollView & you may also need to give style property of flexGrow to 1
contentContainerStyle = {{
flexGrow:1
}}
Related
I have 2 Views One view on the left that have 2 items aligned next to each other, and the other is on the right like this, and on IOS it's worse
The problem as you can see here the name is not align to the arrow, I can't figure what the reason is. Here is my code:
<View style={styles.header}>
<View style={styles.leftHeader}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<ArrowLeft />
</TouchableOpacity>
<View>
<Text style={styles.username}>{user && user.username}</Text>
</View>
<TouchableOpacity
onPress={() => setMoreModalVisible(true)}
style={styles.twoDots}>
<TwoDots />
</TouchableOpacity>
</View>
and here is the styling:
header: {
paddingHorizontal: wp(3),
flexDirection: 'row',
marginTop: hp(2.5),
marginBottom: hp(1),
justifyContent: 'space-between',
alignItems: 'center',
},
leftHeader: {
flexDirection: 'row',
justifyContent: 'flex-start',
textAlignVertical: 'center',
},
username: {
fontFamily: semiBoldFont,
fontSize: 15,
paddingLeft: wp(3),
},
Check the style of <ArrowLeft /> component. There might be some padding or margin applied there.
Or provide us with a snack for you code so we can be able to help you.
You can't change the height of the header because the headerStyle prop doesn't have a height prop.
You can follow the docs reference on this link:
https://reactnavigation.org/docs/headers#adjusting-header-styles
Another way to modify the header style you can set the headerShown prop to false and build your own header in the component where you can define the view height of your custom header, but be carefully because if you turn of the header in react-navigation then you have to use the safeareaview from react-native-safe-area-context because your screen will be slip up. On Android you don't take care about this.
A little code snipett for the example:
<Stack.Screen
name="example"
component={Component}
options={{headerShown: false}}
/>
function Component() {
const headerHeight = Platform.OS === 'ios' ? 44 : 20
return (
<SafeAreaView edges={["top"]}>
<View style={{height: headerHeight}}>
// your custom header content
</View>
</SafeAreaView>
)
}
I have looked at most of the question related to mine but haven't found a solution, my code looks as follows:
<View style={{flex: 1}}>
<ScrollView style={{flexGrow: 1}}>
<Component />
<AnotherComponent />
<View style={{flex: 1}}>
<ScrollView
style={{}}
nestedScrollEnabled
horizontal={true}>
<Button />
<Button />
<Button />
</ScrollView>
</View>
</ScrollView>
</View>
When I remove the horizontal attribute and add a specific height to the nested ScrollView than the scroll will work vertically but the moment I set horizontal={true}, the Buttons disappear.
Drawing of the layout:
I created a Custom Buttom for design purpose which look like this
Check this Snack too
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
Button as BTN,
Dimensions,
} from 'react-native';
function Button({ title, style = {} }) {
return (
<View style={{ ...style }}>
<BTN title={title} />
</View>
);
}
export default Button;
And then in the nested scrolls look like this
import Button from './components/Button';
// Watch out here I have imported my custom button and not the Button from "react-native"
<View style={{ flex: 1 }}>
<ScrollView style={{ flexGrow: 1 }}>
<View></View>
<View></View>
<View style={{ flex: 1 }}>
<ScrollView
style={{ flexDirection: 'row' }}
nestedScrollEnabled
horizontal={true}>
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
<Button title="TEST" style={{ width: 100, margin: 10 }} />
</ScrollView>
</View>
</ScrollView>
</View>
I am using scrollView component to scroll component. It works in local build. But after creating apk file it doesn't work. what can i do.
<View style={{ flex: 1 }}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} style={{ flex: 1 }}>
<View style={styles.container}>
{
submit ?
isPreview ?
<Text>Preview Page</Text> : <Text style={styles.text}>Thank you!</Text>
: <Questions />
}
<PoweredByPEX />
</View>
</ScrollView>
</View>
i have used View and scrollView component here. i can debug after APK build file. what can i do now. i have used flex layout here. is there any way to sort it out.
I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.
In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:
<View style={styles.body, {zIndex:0}}>
<View style={[styles.header,{zIndex:1}]}>
<Text style={styles.header_text}>Search In </Text>
<Dropdown items={CATEGORIES}/>
</View>
<View style={[styles.main,{zIndex:-1}]}>
<Text style={{backgroundColor:'blue'}}>I am the body</Text>
</View>
<View>
I have included the render event markup of the Dropdown element. Its code is given below:
<View style={styles.container}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Text>-V-</Text>
</TouchableOpacity>
<View style={{zIndex:3}}>
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}>
<ScrollView style={{height:60,zIndex:4}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{zIndex:5}}
disabled={this.state.disabled}
key={i}
onPress={()=>this.selectItem(i)}>
<Text >{item} {i}</Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
Styles for Dropdown are:
container:{
zIndex:2
},
main_container:{
flexDirection: 'row',zIndex:2
},
text:{
fontFamily: fontStyles.PoppinsRegular,
fontSize: moderateScale(14)
},
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%',
zIndex:3
}
Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.
I am trying to a background in my react native app and this is my code.
render() {
return (
<View
style={{
alignItems: 'center',
flex:1}}>
<Image
source={darkwallpaper}
style={{
flex: 1,
width: '100%'}}/>
<View
style={{
position: 'absolute',
justifyContent: 'center',
alignItems: 'center'}}>
<ScrollView>
<Text>This is the random Top page</Text>
<Image
source={homemoviespic}
style={{width: '100%'}}/>
<TopMovies />
</ScrollView>
</View>
)
}
Right now, the background shows but the scrollview is not working. I cant scroll and I can see only a few parts of the stuff inside scrollview. Please help.
Found something called ImageBackground that can put image in background and you can just put children in the tag.
<Image> with nested content is no longer supported. Use <ImageBackground> instead.
<ImageBackground style={styles} source={source} resizeMode={resizeMode} >
{children}
</ImageBackground>