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.
Related
My code looks something like this currently:
<View>
<TextInput placeholder='PlaceholderText'>
</TextInput>
</View>
I want to make a TextInput component that has an opacity animation on click (exactly like TouchableOpacity changes opacity on click).
I tried wrapping the TextInput inside TouchableOpacity, but it doesn't work since the touchable component surrounds text input. Is there a standard React Native or StyleSheet way of doing this or would I have to manually create an animation to mimic that effect?
Simply wrap your TextInput in a View element and animate the View's opacity color from the onFocs event of the TextInput. TextInput doesn't have the opacity attribute, therefore the additional view is required for your goal.
Following code may give you an idea how to solve it. Have to admit, that I haven't tested the code, it may contain some error, so use it carefully.
// First create an animated value to use for the view's opacity.
const textInputAnimOpacity = useRef(new Animated.Value(1.0)).current;
// create a method to set the opacity back to 1.0
const showTxtInput = () => {
Animated.timing(textInputAnimOpacity, {
toValue: 1.0, // value to reach
duration: 250 // time in ms
}).start();
};
// this animated method differs from the first one by (obviously the value 0.7)
//and the callback part that goes into the start()-method
const blurTxtInput = () => {
Animated.timing(textInputAnimOpacity, {
toValue: 0.7, // value to reach
duration: 250 // time in ms
}).start(({ finished }) => {
showTxtInput(); // Callback after finish, setting opacity back to 1.0
});
};
/*Set the opacity to the value, we want to animate*/
<View style={{opacity:textInputAnimOpacity}}>
/* call blurTxtInput to set the value to 0.7 and again to 1.0 once it reaches 0.7*/
<TextInput onPressIn={blurTxtInput} placeholder='PlaceholderText'>
</TextInput>
</View>
If you just want to set opacity, make your styles change using the onPressIn and onPressOut props:
const [pressed, setPressed] = useState(false);
// in render
<TextInput
onPressIn={() => setPressed(true)}
onPressOut={() => setPressed(false)}
style={pressed ? styles.textInputPressed : styles.textInput}
// ...
/>
If you need the changes to animate, you can do that with the built-in RN Animated component or react-native-reanimated, using the same props to trigger the animations.
How to scroll to the bottom of any list using hooks in React Native 0.63?
When I do
const scrollviewref = useRef(ScrollView);
<ScrollView
ref={scrollviewref}
onContentSizeChange={scrollviewref
.getNode()
.scrollTo({ animated: true }, 0)}
>
it says scrollviewref.getNode is not a function
or
<ScrollView
ref={scrollviewref}
onContentSizeChange={scrollviewref
.scrollTo({ animated: true }, 0)}
>
it says scrollviewref.scrollTo is not a function
I have added
scrollviewref.current.scrollToEnd({ animated: true });
inside useEffect but the scrollis not happening immediately, any suggestions why?
Could anyone please help me out here?
Any leads would be great.
I have a FlatList setup like so
<FlatList
style={styles.listContainer}
data={this._formatList()}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
ItemSeparatorComponent={this.renderSeparator}
nestedScrollEnabled
showsVerticalScrollIndicator={false}
extraData={this.state}
ref={this._setRef}
/>
I also have these following two relevant functions in my component
_setRef = (ref) => {
this._listref = ref;
}
_scrollToTop = () => {
this._listref.scrollToIndex({ index: 0, animated: true });
}
I have checked that the this._listref is setup correctly when FlatList is rendered.
The function _scrollToTop is called from a button click (and it is indeed called).
For some reason the list does not scroll to top as expected.
I have tried various options playing with viewOffset / viewPosition.
It seems no scrolling action is taking place.
This is an expo project with "sdkVersion": "33.0.0"
and React and RN as follows from package.json
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
Thanks.
From the docs: https://facebook.github.io/react-native/docs/flatlist#scrolltoindex
Note: Cannot scroll to locations outside the render window without
specifying the getItemLayout prop.
So you'll need to implement getItemLayout for scrolling to the top to work properly with scrollToIndex since most certainly it will be outside of the current render window.
You could alternatively use scrollToOffset: https://facebook.github.io/react-native/docs/flatlist#scrolltooffset with a param of {offset: 0} instead.
Have you tried using offset?
this.listRef.getNode().scrollToOffset({ offset: 0, animated: true });
OR
this.listRef.scrollToOffset({ animated: true, offset: 0 });
Trying using this and I hope this will work assuming that you've correctly set up the reference of the scrollview and passing that correctly in the function.
I'm interested in having a view which initially loads with my React Native app that essentially has nested components in it. These components will give visual queues to the user as to what state the app is in, eg: still loading data from the server, etc. Basically, it's not just a static splash screen. I might also add some kind of spinner/progress bar, eg: other animated components.
There are solutions out there for static splash screens that initially show while your app loads into memory, but I need to be able to load an initial component, and then remove it when the application's data is ready to go. Is there a convention/pattern to follow in order to achieve this? Is there a way to mount a component, then remove it when it's no longer necessary allowing the rest of the app to be displayed? What's a best practice for this using React Native?
This is what I used to do:
Use <Modal /> to provide your initial, interactive page. It will blocks the screen, with semi-transparent background; If you like it to be full width, just use flex: 1 within the <View /> inside <Modal />.
Use global object / queue for loading status information. My choice is rxjs, then your initial page can just listen to this one source of truth, suggest a BehaviorSubject. So you can subscribe on it for something like:
...
{ tag: 'FetchRemoteData', progress: 10 }
{ tag: 'LoadingComponent', progress: 5 }
{ tag: 'FetchRemoteData', progress: 20 }
...
Read it until match your "load complete" conditions, then close the model.
To make it clear with code.
app.js
render() {
return (
<View>
<InitialBlockingPage />
<YourMainApp />
</View>
);
}
initial-blocking-page.js
constructor(props) {
super(props);
this.state = {
visible: true
};
}
componentDidMount() {
globalQueue.subscribe( () => {
/// pseudo code: until fully loaded
if (fullloaded) this.setState({visible: false});
});
}
render() {
return (
<Modal visible={this.state.visible}>
<SplashScreenWithData />
</Modal>
);
}
I am using StackNavigation from #exponent/ex-navigation lib. Everything works fine. But push() or pop() does not to any animation. I have tried setting following for same
<StackNavigation
defaultRouteConfig={{
navigationBar: {
backgroundColor: Colors.appThemeColor,
tintColor: 'whitesmoke',
}
}}
configScene={ExNavigator.SceneConfigs.FloatFromRight}
initialRoute={Router.getRoute('locator')} />
configScene={ExNavigator.SceneConfigs.FloatFromRight} was not able to render scene with animation.
Please let me know if i am missing anything.
I got it fixed, was setting animation at wrong place. Set it at Scene with required navigation style
static route = {
styles: NavigationStyles.FloatHorizontal,
}