I'm looking to create animations similar to those on this page as each element comes into view, except they would slide in from the left/right.
I've done things like this with React previously with framer motion like this:
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.3, delay: 0.5 }}
variants={{
visible: { opacity: 1, x: 0 },
hidden: { opacity: 0, x: 50 }
}}
>
content
</motion.div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I can't seem to find a similar equivalent in React Native though. Does someone have a code sandbox and/or a npm package that can help with this?
Thanks
You could try react-native-animatable.
This would look something like this:
<Animatable.View
animation="bounceInLeft"
duration={600}
>
<Text >
Animation Example!
</Text>
</Animatable.View>
);
You can go with react-native-reanimated, and use entering LayoutAnimation.
I think this is one of the best, cuz almost every project has reanimated library, and these animations runs on the UI thread.
Quick note: As I know, the LayoutAnimation fundamentals is in rewriting phase right now.
Related
I am using gorhom/react-native-bottom-sheet
The issue I am facing:
I have a FlatList inside a BottomSheet, I am able to scroll in FlaLlist on ios but it is not working on android.
After a lot of research, I was able to resolve the issue by using BottomSheetFlatList instead of FlatList from the same package.
import { BottomSheetFlatList } from "#gorhom/bottom-sheet";
<BottomSheetFlatList
ref={ref}
initialNumToRender={3}
keyExtractor={(item) => item?.id}
showsVerticalScrollIndicator={false}
maxToRenderPerBatch={3}
windowSize={7}
data={dat}
renderItem={renderItem}
/>
By doing so, it started working fine on android too.
But as I also wanted my Flatlist to auto-scroll using ref on a particular event.
After some research and because of the great documentation of #gorhom/bottom-sheet. I found out the solution in the troubleshooting section of the docs.
But as a developer, StackOverflow is our first go-to place for every issue. So, I decided to post the answer here.
ANSWER
Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler, any gesture interaction would not function as expected.
To resolve this issue, please use ScrollView & FlatList from react-native-gesture-handler provide instead react-native.
import {
ScrollView,
FlatList
} from 'react-native-gesture-handler';
find the original answer here-
https://gorhom.github.io/react-native-bottom-sheet/troubleshooting
Using raw-bottom-sheet raw-bottom-sheet and set "dragFromTopOnly" as true, and any touch operation can be performed i will mention
example below:
<RBSheet
ref={refRBSheet}
dragFromTopOnly={true}
customStyles={{
wrapper: {
backgroundColor: "transparent"
},
draggableIcon: {
backgroundColor: "#000"
}
}}
>`
I'm using the react-native-elements ui framework with ThemeProvider and trying to globally style the text of a component like this...
<ListItem bottomDivider>
<ListItem.Title>Name</ListItem.Title>
<ListItem.Input>DoB</ListItem.Input>
</ListItem>
I want to style this <ListItem.Input> text color red. So I've tried a ton of things similar to the code below, but I can't get anything working. Any ideas?
ListItem: {
inputStyle: {
color: "red"
}
}
I'd prefer to keep the styling global and not to do it inline, if possible.
You have to use ListItemInput
ListItemInput:{
style:{}
}
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
I'm building a modal which displays a zoomable image using the library react-native-image-viewer. This is my custom component:
<Modal
animationType="slide"
visible={isVisible}
transparent={true}
>
<ImageViewer imageUrls={images} />
</Modal>
The thing is when I click on the image, the modal shows up and it displays the zoomable image but with this warning message:
Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false
I've been searching a lot and the solutions found where to include something like this:
animatedValue = new Animated.Value(-300);
componentDidMount() {
Animated.timing(this.animatedValue,
{
toValue: 0,
duration: 3000,
useAnimatedDriver: true,
}).start();
}
and including ImageViewer inside an Animated.View component, but I've tried it and I still have the same warning. Any solution?
Thanks in advance
This is because RN team made useNativeDriver as a required property https://github.com/facebook/react-native/commit/5876052615f4858ed5fc32fa3da9b64695974238 and react-native-image-viewer maintainer haven't updated its implementation.
I am would like to make an animated header.
I Created an animated component of FlatList,
Used the onScroll function to update the animated value.
Placed a view (Animated.View) as the header above the animated FlatList using position absolute.
Finally, interpolate the animated value to change the view (Animated.View) using transform properties.
The animation works fine, but the animation is not smooth at all.
I saw this issue of how using scrollEventThrottle helps the smoothness. So I thought using FlatList would be smooth but it's not. If your scroll while pressing, it's smooth. But if you scroll and leave the finger, it's jumpy ( I don't know how to describe it. Sorry). The scrolling is smooth but the animated view (Header) animation is not smooth at all.
Environment
react: 16.0.0-alpha.12,
react-native: ^0.47.0,
node: v7.7.3
npm: 4.1.2
yarn: 0.21.3
Target Platform: iOS and Android
Build tools: expo
Link to snack demo
export default class AnimatedHeader extends React.Component {
state = {
animatedValue: new Animated.Value(0),
};
_renderItem = ({item}) => {
return (
<View style={styles.nonsenseItem}>
<Text style={styles.itemText}>{item}</Text>
</View>
)
};
render() {
let scaleY = this.state.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [1, 0.5],
extrapolate: 'clamp',
});
let translateY = this.state.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [0, -100],
extrapolate: 'clamp',
});
return (
<View style={styles.container}>
<AnimatedFlatList
contentContainerStyle={{marginTop: 200}}
scrollEventThrottle={16} // <-- Use 1 here to make sure no events are ever missed
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.animatedValue}}}],
{useNativeDriver: true} // <-- Add this
)}
data={data}
renderItem={this._renderItem}
keyExtractor={(item, i) => i}/>
<Animated.View style={[styles.headerWrapper, {transform: [{scaleY}, {translateY}]}]}/>
</View>
)
}
}
Update
So, I tried to implement the same functionality using ScrollView. However, I think, its event worse using ScrollView when compared to FlatList.
Here is the expo snack demo: Animated ScrollView Header
I think I need to mention how I got here at the first place. So, I tried to implement this by a very nice tutorial in Medium, and also by watching this awesome youtube react conf viedo by Brent. However, the exact code used on youtube video has the same effect. Also, on the Medium tutorial, the author has given a Link to his expo Animated header link, which works very smoothly. But the same code doesn't work smoothly when I copy paste the code. So, I think the problem is with the react or react native version. I will update if I have any new update. Thank you.
There has been a regression in React Native 0.46 which, fortunately, has been fixed in 0.48.2 (see this issue and this PR). That's why you're having the issue with recent Expo versions. I've had this problem with custom parallax images, and this was solved by building a custom binary with RN 0.48.3.
Your code is fine, even though I would recommend setting scrollEventThrottle to 1 as this really helps smoothing things out on iOS.