Here is the code:
<View
style={{transform: [{translateX: this.state.translateX}], width: '120%'}}>
<View style={{width: '20%'}}>{someText}</View>
<View style={{width: '80%'}}>{someText}</View>
<View style={{width: '20%'}}>{someText}</View>
</View>
this.state.translateX was respond to swipe gesture which worked fine, the first two View did move but the last View was not visible (or not moved?). I want to show the last View when this.state.translateX changed. But it seems not being properly rendered?
It is because Android does not render element which is off screen. Solution is place the element in screen with position: 'absolute' and then use translateX to hide it from screen.
Related
I implemented a bottom half modal view in react native, which is sliding in from the bottom . I set the background of the modal view to transparent so the previous view is still visible, but the modal view is in focus. This is working fine and once it is open it also looks how I want it to look. My problem is, that the transparent background is also sliding in from the background and this does not look like a native implementation at all. What I want to achieve is, that the transparent background just appears while the modal view slides in from the bottom. Any idea on how to solve this?
Note: Iam using Modal from inbuilt react native, hence not using any npm module or package.
My code:
import { View, Text, Modal } from 'react-native';
function DurationModal(props) {
<View>
<Modal
visible={props.isVisible}
transparent
animationType='slide'
statusBarTranslucent
>
<View>
<View style={{ backgroundColor: 'rgba(0,0,0,0.1)', height: hp('60%') }}></View>
<View style={{ backgroundColor: Colors.whiteBackgroundColor, height: hp('40%') }}>
<Text>Hello</Text>
</View>
</View>
</Modal>
</View>
);
}
I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll
I have a ScrollView with some Views inside it, but I want to start an animation when the user gets to specific View and after it starts my animation.
Example:
<ScrollView style={{ width: DeviceWidth, height: DeviceWidth * 0.5 }}>
{/* When user position scroll is here,
is where I want to start the animation,
not since the page is loaded */}
<View style={{
width: DeviceWidth * 0.4,
height: DeviceWidth * 0.4,
resizeMode: "contain",
}}>
<ProgressBarAnimated
width={barWidth}
value={65}
backgroundColor="#F68D29"
height={40}
barAnimationDuration={6000}
/>
</View>
</ScrollView>
Instead of using a ScrollView you can instead use a FlatList, this gives you a lot more support for the type of indexing you're trying to do.
To detect when a user reaches a specific point you can use onViewableItemsChanged and the define which viewable items need to be on screen in order to trigger your animation.
FlatLists also support a number of build in animations like scrollToEnd or ScrollToIndex which may be helpful.
I want to make a little game when some circles comes from the top of the screen. After they appear they will drag down until they go out of the screen.
To make that i have a flatlist which contains all of the circles
<FlatList scrollEnabled={false}renderItem={this.renderItem}data={this.state.elements} />
Then in the render item I insert the circle item view
renderItem = ({item}) => (
<Circle
apparitionTime={new Date().getTime() / 1000}
id={item.id}
removeCircle={this.removeCircle}
updateScore={this.updateScore}/>
);
A circle item looks like this :
<Animated.View style={[/*this.moveAnimation.getLayout(),*/ styles.animatedView]}>
<TouchableOpacity style={styles.circleStyle} onPress={() => this.prepareToSend()}>
<View style={styles.absoluteView}>
</View>
<Image style={styles.image} source={require('../assets/images/music.png')}/>
</TouchableOpacity>
</Animated.View>
I use the animated view to make them scrolling all over the view.
I want the animated view to be on position absolute,but no matter what i've tried after sending the animated view to position absolute, the element disappear
animatedView: {
top: 0,
zIndex: 100,
width: 75,
height: 75,
position: "absolute", // does not work
},
Any Ideas ? Thank you
Position absolute didn't work inside a flatlist.
Now how to render positional elements inside it !!!!!!!....
Alternatively, you can use alignSelf: 'flex-end' or alignSelf:
'flex-start' and further you can place it by using margin/padding
inside the view. More you can read here about absolute not working in
their official docs
If you take a look on the left of the time on the status bar, you can see part of the scrollview showing. When scrolling up i can see the scrollview with all the elements ( pickers ,textinputs etc) scrolling underneath the statusbar.
My hierarchy looks like this
<React.Fragment>
<SafeAreaView forceInset={true} style={{ flex: 1, backgroundColor: colors.black, zIndex: 10000 }}>
<View style={{flex:1}}>
<Header/> //has certain height. had to add zIndex=10000 to avoid same issue
<KeyboardAvoidingView behavior='position'>
<ScrollViewWithContent/>
</KeyboardAvoidingView>
</View>
</SafeAreaView>
</React.Fragment>
Are you seeing anything obviously off?
Adding overflow:hidden; will do the trick. However i feel like this shouldnt be happening in the first place. The original bug is a weird state where part of the scrollview shows ( the text ) and part of it doesnt ( the background )