previously in the unit column can only scroll horizontally per each floor/block and I want to scroll units horizontally together.
this is my code :
<ScrollView style={{ width: "55%" }} horizontal>
<View style={styles.GridViewBlockStyle}>
<TouchableOpacity>
</TouchableOpacity>
</View>
</ScrollView>
Related
I am trying to align image on top of its container in react native, especially on landscape.
<View style={{flexDirection: 'row', justifyContent: 'center',alignItems: 'center'}}>
<View style={{flex:1,backgroundColor: 'green'}} >
<Image resizeMode='contain'style={{ flex:1,width:"100%",height:"100%"}} source={{uri:"https://www.tageblatt.lu/wp-content/uploads/2020/09/250112_cx__cy__cw__ch_-1-739x493.jpeg"}} />
</View>
<View style={{width:"15%",backgroundColor: 'blue' }}>
<Text style={{color:"white",padding:7}}>{caption}</Text>
</View>
</View>
The output of this code is :
And on landscape:
The desired output is:
Which I get on landscape orientation if I press control+s (saving) on my editor.
I follow this question, but with no solution for me .
I tried different values for resizeMode also .
Have you tried to change the resizeMode ?
<Image resizeMode='cover' ... />
I have a 10x10 matrix and I want to render it in a flat list. How can I enable vertical and horizontal scrolling on this so that user can select the item of their choice out of 10X10 matrix. I just want my flat list to be scrolled in both the ways.
Please pass this in flatlist numColumns={10} according to number of columns you want to show , it will display items horizontally in a flatlist
in a grid format
(You don't need separate scrollview)
For this, you can nest your FlatList inside a ScrollView as follow
<ScrollView>
<View>
<FlatList />
</View>
</ScrollView>
To achieve the both direction Scroll behaviour, you can do that by nesting a second ScrollView like this
<ScrollView
horizontal
bounces={false}
>
<ScrollView
nestedScrollEnabled
bounces={false}
contentContainerStyle={{ height: //the height of your inner content }}
>
<View>
<FlatList />
</View>
</ScrollView>
</ScrollView>
I haven't tested this yet, so please make sure to ask me anything.
<FlatList
data={data}
numColumns={4}
renderItem={({ item, index }) => (
<View
style={{
padding: 20,
}}
>
<Image
source={{
uri: item.uri,
}}
style={{ width: 64, height: 50 }}
/>
<Txt.$Title
style={{ fontSize: 10, paddingTop: 5, textAlign: "center" }}
>
{tr(item.name)}
</Txt.$Title>
</View>
)}
ItemSeparatorComponent={Kitten.Divider_________}
ListEmptyComponent={
<Txt.Indicator marginV>{tr("No trophy found")}</Txt.Indicator>
}
/>
I have created a dropdown. Its elements appearing on top of body, however, when I press them, it actually triggers onPress on elements underneath them.
You guys can see the issue:
Code for the Dropdown is:
<View style={[styles.container]}>
<TouchableOpacity style={styles.main_container} onPress={this.animate}>
<Text style={styles.text}>{this.state.selectedCategoryText}</Text>
<Image style={styles.image}
source={require('../../assets/icons/dropdown.png')}
/>
</TouchableOpacity>
<View >
<Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:1, elevation:1}]}>
<ScrollView style={{height:60}}>
{ this.data.map( (item, i)=>
<TouchableOpacity
style={{}}
disabled={false}
key={i}
onPress={()=>this.selectItem(i)}>
<Text style={styles.item_text}>{item} </Text>
</TouchableOpacity>
)}
</ScrollView>
</Animated.View>
</View>
</View>
I have applied absolute positioning on the animated view which displays the dropdown items.
animated_container:{
backgroundColor: colors.secondaryWhiteColor,
position: 'absolute',
top: '100%',
width: '100%', height: 70
}
I have managed to know the source of the problem, however I still don't know what exactly is the problem. DrawerNavigator from React.Navigation is doing something. If I remove the screen containing dropdown from the DrawerNavigator, then it works properly.
try to use touchable opacity from gesture handler not react native
When I add a fixed height style it works and the content is there but when I set it to flex:1 (the correct way) the scrollview disappears along with the content.
My code:
<ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>
<View style={{padding: 5}}>
<Text>search</Text>
</View>
<View style={{padding: 5}}>
<Text>New Matches</Text>
<ScrollView contentContainerStyle={{flex:1}} horizontal={true} showsHorizontalScrollIndicator={false}>
<View style={{padding: 10}}>
<Thumbnail medium circle source={require('../assets/placeholders/profile1.jpg')}/>
<Text>Christian</Text>
</View>
<Text>works</Text>
<Text>works</Text>
<Text>works</Text>
<Text>works</Text>
<Text>works</Text>
</ScrollView>
Also, as you can see I have two scrollviews. I am referring to the outermost (the vertical scrollview).
Wrap your outer ScrollView to a View component with flex:1 style.
<View style={{flex: 1}>
<ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>
...
</ScrollView>
</View>
How react native scroll text?
I have a long text in a fixed height container. I want to show a part of text in that container and scroll it when I want to see more.
I have try overflow scroll but react native seems not support overflow scroll.
Thanks.
You can use ScrollView for this case. Just put your text inside it and set height to scroll view.
I'm used the following code. Take ScrollView and put your any element inside ScrollView.
render() {
return(
<View style={styles.container}>
<ScrollView>
<Text>
Add your text
</Text>
</ScrollView>
</View>
);
}
There is currently a limitation in React Native where you can't set height directly on the ScrollView style prop. So, I suggest you do the following if you also want to set the height:
<View style={{ height: 100 }}>
<ScrollView>
<Text>
Your text goes here.
</Text>
</ScrollView>
</View>
Or alternatively using flexGrow:
<ScrollView style={{ flexGrow: 0.2 }}>
<Text>
Your text goes here.
</Text>
</ScrollView>
Relevant issue I found: https://github.com/facebook/react-native/issues/3422
<View style={{ height: hp(3)}}>
<ScrollView>
<Text style={{ fontSize: hp(2) }}>
Your text goes here
</Text>
</ScrollView>