Animation - How to turn animated values into real values via interpolate - animation

I'm trying to simultaneously restrict the values of my animation (using clamp as well as interpolate) but also get the values out of the interpolation so I can use them. Specifically because I want to update a piece of state with them and create an observable from that. I just can't figure out how to extract the 'real' value out of the AnimatedValue that is produced by the interpolation (in this case state.panValue). I've tried
this.state.panValue.value
and
this.state.panValue._value
and they come back as undefined. If anyone could help me out would be amazing!
EDIT: I'd also be really happy to just have the
this.state.pan.x
variable updated within the limits so I can skip the whole updating the state variable 'panValue' thing. A nice guy on Facebook suggested that I could implement this limit somehow inside the onPanResponderMove by switching the variable to a function or something but I've tried several things and all I get are errors, I guess because I don't really know how to 'safely' amend these animated values.
onPanResponderMove: Animated.event([
null,
{ dx: this.state.pan.x },
]),
Original Code:
import React, { Component } from 'react';
import {
View,
Animated,
PanResponder,
Text,
} from 'react-native';
import styles from './styles';
class ClockInSwitch extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
panValue: 0,
};
}
componentWillMount() {
this._animatedValueX = 0;
this._animatedValueY = 0;
this.state.pan.x.addListener((value) => {
this._animatedValueX = value.value;
this.setState({
panValue: this.state.pan.x.interpolate({
inputRange: [-30, 0, 120,],
outputRange: [-10, 0, 120,],
extrapolate: 'clamp',
}),
});
});
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
this.state.pan.setOffset({
x: this._animatedValueX,
});
this.state.pan.setValue({ x: 0, y: 0 });
},
onPanResponderMove: Animated.event([
null,
{ dx: this.state.pan.x },
]),
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
this.state.pan.flattenOffset();
Animated.timing(this.state.pan, {
toValue: 0,
duration: 500,
}).start();
},
onPanResponderTerminate: (evt, gestureState) => {
},
onShouldBlockNativeResponder: (evt, gestureState) => {
return true;
},
});
}
componentWillUnMount() {
this.state.pan.x.removeAllListeners();
}
render() {
const animatedStyle = {
transform: [{
translateX: this.state.panValue,
},
],
};
return (
<View>
<Text>{this.state.pan.x._value}</Text>
<View style={styles.buttonStyle}>
<Animated.View
style={[styles.sliderButtonStyle, animatedStyle]}
{...this._panResponder.panHandlers}
/>
</View>
</View>
);
}
}
export default ClockInSwitch;

I think this is what you're looking for. I'm using exponent so your declaration for vector icons would probably need to be changed. Cheers!
/**
* #providesModule ClockInSwitch
* #flow
*/
import React, {Component} from 'react';
import {View, Animated, StyleSheet, PanResponder, Text} from 'react-native';
import {FontAwesome} from '#exponent/vector-icons';
export class ClockInSwitch extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
panValue: 0
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this
.state
.pan
.setValue({x: 0, y: 0});
},
//here's where you can check, constrain and store values
onPanResponderMove: (evt, gestureState) => {
// 300 is the width of the red container (will leave it to you to calculate this
// dynamically) 100 is the width of the button (90) plus the 5px margin on
// either side of it (10px total)
var newXVal = (gestureState.dx < 300 - 100)
? gestureState.dx
: 300 - 100;
this
.state
.pan
.x
.setValue(newXVal);
//set this state for display
this.setState({panValue: newXVal});
},
onPanResponderRelease: (e, {vx, vy}) => {
this
.state
.pan
.flattenOffset();
Animated
.spring(this.state.pan, {
toValue: 0,
duration: 400,
overshootClamping: true
})
.start();
this.setState({panValue: 0});
}
});
}
componentWillUnMount() {
this
.state
.pan
.x
.removeAllListeners();
}
render() {
//decouple the value from the state object
let {pan} = this.state;
let [translateX,
translateY] = [pan.x, pan.y];
let translateStyle = {
transform: [{
translateX
}, {
translateY
}]
};
return (
<View>
<Text style={styles.leftText}>Power Button Demo</Text>
<View style={styles.buttonStyle}>
<Animated.View
style={[styles.sliderButtonStyle, translateStyle]}
{...this._panResponder.panHandlers}>
<FontAwesome
name="power-off"
color="#EA2E49"
style={{
alignSelf: "center",
marginHorizontal: 10
}}
size={36}/>
</Animated.View>
</View>
<Text style={styles.rightText}>{this.state.panValue}: x value</Text>
</View>
);
}
}
export default ClockInSwitch;
const styles = StyleSheet.create({
sliderButtonStyle: {
borderColor: '#FCFFF5',
borderStyle: 'solid',
borderWidth: .5,
backgroundColor: '#FCFFF5',
borderRadius: 45,
height: 90,
width: 90,
justifyContent: 'center',
textAlign: 'center',
marginHorizontal: 5,
shadowColor: '#333745',
shadowOffset: {
width: 2,
height: 2
},
shadowOpacity: .6,
shadowRadius: 5
},
buttonStyle: {
borderColor: '#FCFFF500',
backgroundColor: '#DAEDE255',
borderStyle: 'solid',
borderWidth: 1,
height: 100,
width: 300,
justifyContent: 'center',
borderRadius: 50,
margin: 5,
flexDirection: 'column'
},
rightText: {
justifyContent: 'center',
textAlign: 'right',
fontWeight: '100',
marginHorizontal:15,
fontSize: 20,
color: '#FCFFF5',
marginVertical:25,
flexDirection: 'column'
},
leftText: {
justifyContent: 'center',
textAlign: 'left',
fontWeight: '100',
marginHorizontal:15,
fontSize: 24,
color: '#FCFFF5',
marginVertical:25,
flexDirection: 'column'
}
});

Related

How to add outside box shadow in react navigation bottom tabs?

I would like to add a outside box shadow in react-native-navigation.
The desired effect should look like this:
Currently when I apply styles the outside box shadow does not change:
import React, { FunctionComponent } from 'react'
import NavigatorProps from './NavigatorBottomTabs.type'
import { Screen } from '../../Module/Navigation/Navigation.type'
import Route from '../../Module/Navigation/Navigation.route'
import { ANY } from '../../Type/Type'
import TabBar from './NavigatorBottomTabs.TabBar'
const RenderScreen = (Tab: ANY) => (screen: Screen) =>
<Tab.Screen key={screen.name} {...screen} />
const NavigatorBottomTabs: FunctionComponent<NavigatorProps> = (props) => {
const Tab = props.Tab
return (
<>
<Tab.Navigator
tabBar={TabBar}
initialRouteName={Route.RootDabshboardProfileRouter}
tabBarOptions={{
borderWidth: 1,
borderColor: 'red',
marginTop: 10,
style: {
borderTopWidth: 0,
elevation: 8,
backgroundColor: '#d9d9d9',
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
}
}}
screenOptions={{
tabBarStyle: {
elevation: 8,
borderTopWidth: 0,
backgroundColor: '#d9d9d9',
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
}
}}
>
{props.screens.map(RenderScreen(Tab))}
</Tab.Navigator>
</>
)
}
export default NavigatorBottomTabs

Image Scroll Zoom in React Native

when creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list. This could be to showcase the content of the page. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs.
import React, { Component } from 'react';
import {
View,Text,StyleSheet,ScrollView,Image, Animated, Dimensions
} from 'react-native';
HEADER_MAX_HEIGHT = Dimensions.get("window").height*0.4;
HEADER_MIN_HEIGHT = 70;
PROFILE_IMAGE_MAX_HEIGHT = 80;
PROFILE_IMAGE_MIN_HEIGHT = 40;
const IMAGE_SCALE_MAX = 20;
const LABEL_HEADER_MARGIN = 48;
import FastImage, { FastImageProps } from 'react-native-fast-image';
const AnimFastImage = Animated.createAnimatedComponent(FastImage);
class App extends Component {
constructor(props) {
super(props);
this.state = {
scrollY: new Animated.Value(0),
pan: new Animated.ValueXY()
};
}
render() {
return (
<ScrollView style={{
flex: 1,
width: '100%',
height: '100%',
backgroundColor: 'white'
}}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
contentContainerStyle={{ padding: 0 }}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.pan.y } } }],
{
useNativeDriver: false,
},
)}
alwaysBounceVertical={false}
contentInsetAdjustmentBehavior="never"
scrollEventThrottle={1}
>
<AnimFastImage
animStyle={{
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [-100, 0],
extrapolate: 'clamp',
}),
},
{
scale: this.state.pan.y.interpolate({
inputRange: [-3000, 0],
outputRange: [IMAGE_SCALE_MAX, 1],
extrapolate: 'clamp',
}),
},
],
}}
source={{ uri: 'https://i.picsum.photos/id/1/400/400.jpg?hmac=lOytrN6lDOH_Yx7NwwGIaCtxp6pyuH2V4hD6Eac-VI0', priority: 'high' }}
style={styles.img}
resizeMode="cover"
/>
<Animated.View
style={{
paddingHorizontal: 16,
transform: [
{
translateY: this.state.pan.y.interpolate({
inputRange: [-1000, 0],
outputRange: [LABEL_HEADER_MARGIN * IMAGE_SCALE_MAX, -80],
extrapolate: 'clamp',
}),
},
],
}}>
<Text style={{ fontWeight: 'bold', fontSize: 20}}>
Trần thanh tung
</Text>
<View style={{ height: 700 }} />
</Animated.View>
</ScrollView>
)}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
img: {
backgroundColor: '#ccc',
width: '100%',
height: 350,
justifyContent: 'flex-end',
padding: 0,
},
});
But it doesn't work as I want it to. I want it to be like the user part of the telegram
what I want

BottomSheet animation in react-native doesnt work properly for the first time

I'm trying to create this animation for my bottomsheet ,so initially when my homescreen loads, the bottomsheet pops up from below with a spring animation and then when the user swipes up , the bottomsheet also swipes up witha spring animation to it, and again if the user swipes down the bottomsheet comes back to its original position with a spring animation to it.
The only problem i'm facing is that, the first swipe up that i make after the initial popping up spring animation happens, the animation for the swiping up, doesnt happen smoothly, and it snaps to the upper position in just an instant without showing any spring like animation
Here is my code for my BottomSheet.
import * as React from "react";
import { SCREEN_HEIGHT } from "../../assets/constants";
import { StyleSheet, Animated, TextInput, View } from "react-native";
import { PanGestureHandler } from "react-native-gesture-handler";
import { Easing } from "react-native-reanimated";
import BottomSheetStack from "./BottomSheetStack";
export default class BottomSheet extends React.Component {
constructor(props) {
super(props);
this.BottomSheet = new Animated.Value(0);
this.state = {
isOpen: false,
isLoading: false,
isPanChanged: false,
};
}
componentDidMount() {
setTimeout(() => this.animateTranslate(), 1000);
}
animateTranslate() {
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 500,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
translateDrawer() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT, SCREEN_HEIGHT / 1.48],
});
}
animateBottomSheetUp() {
this.BottomSheet.setValue(0);
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
animateBottomSheetDown() {
this.BottomSheet.setValue(0);
Animated.spring(this.BottomSheet, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
handlePanGesture(props) {
this.setState({ isLoading: true });
if (!this.state.isPanChanged) {
this.setState({ isPanChanged: true });
}
if (!this.state.isOpen && props.nativeEvent.translationY > 0) {
this.animateBottomSheetUp();
this.setState({ isOpen: true });
} else if (this.state.isOpen && props.nativeEvent.translationY < 0) {
this.animateBottomSheetDown();
this.setState({ isOpen: false });
}
}
openBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
closeBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_HEIGHT / 2.1, SCREEN_HEIGHT / 1.48],
});
}
render() {
return (
<PanGestureHandler
onGestureEvent={(props) => this.handlePanGesture(props)}
>
<Animated.View
style={{
...StyleSheet.absoluteFill,
height: SCREEN_HEIGHT - SCREEN_HEIGHT / 2.2,
backgroundColor: "#ffffff",
elevation: 10,
transform: [
{
translateY: !this.state.isLoading
? this.translateDrawer()
: !this.state.isOpen && this.state.isPanChanged
? this.openBottomSheetHandler()
: this.closeBottomSheetHandler(),
},
],
alignItems: "center",
borderRadius: 15,
}}
>
<View style={styles.bottomSheetLine} />
<TextInput
value={this.state.name}
style={styles.searchBox}
placeholder="Search"
placeholderTextColor="#5DB075"
/>
<BottomSheetStack {...this.props.navigation} />
</Animated.View>
</PanGestureHandler>
);
}
}
const styles = StyleSheet.create({
searchBox: {
height: 45,
width: `85%`,
backgroundColor: "#ffffff",
borderRadius: 10,
color: "#5DB075",
paddingLeft: 20,
fontSize: 14,
letterSpacing: 0.5,
top: 20,
fontFamily: "regular",
borderColor: "#5DB075",
borderWidth: 1,
},
bottomSheetLine: {
height: 5,
backgroundColor: "#5DB075",
width: 70,
borderRadius: 5,
top: 5,
},
});
Please suggest me some idea on how i can achieve this, or any other method that can be used to achieve this.
So, apparently, somewhere i found that spring animation, toValue:1 doesnt actually go upto 1, and it slightly crosses 1. So that's why my animation was behaving like that i guess.
The solution to this was, i simply changed my toValue for animateBottomSheetUp and animateBottomSheetDown , went to higher value, i.e toValue:2 for animateBottomSheetUp .
My changes in my code are very minor , it looks like this ,
also i removed all the this.BottomSheet.setValue(/*somevalue*/) from my code.
for animateBottomSheetUp:
animateBottomSheetUp() {
Animated.spring(this.BottomSheet, {
toValue: 2, // made this change from 1 to 2
duration: 100,
useNativeDriver: true,
easing: Easing.ease,
}).start();
}
and the openBottomSheetHandler & closeBottomSheetHandler looks like this now,
openBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [1, 2],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
closeBottomSheetHandler() {
return this.BottomSheet.interpolate({
inputRange: [1, 2],
outputRange: [SCREEN_HEIGHT / 1.48, SCREEN_HEIGHT / 2.1],
});
}
I'm posting this answer if anybody faces the same problem,
Though i have worked around this problem, but i still feel there must be a better way to do this,if anybody has any better way , please answer. :-)

How to get props value through drawer navigator

How to get the userdata props value in head component ?I am mapping state to
props but not able to take that value in head component.How to pass this.
Passing values to Higher order component.Provinding the code.Can someone
please go through it. How to get the userdata props value in head component ?I am mapping state to
props but not able to take that value in head component.How to pass this.
Passing values to Higher order component.Provinding the code.Can someone
please go through it
import React from "react";
import {Image, Text, View, ToastAndroid} from "react-native";
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createMaterialTopTabNavigator, createStackNavigator, createAppContainer,DrawerActions} from "react-navigation";
import {Icon} from 'react-native-elements';
import DrawerContent from "./DrawerContent";
import {connect} from "react-redux";
import FirstList from "./FirstList";
import SecList from "./SecList";
import ThirList from "./ThirList";
import color from "../util/Colors";
import DashBoard from "./DashBoard";
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const TabNavigator = createMaterialTopTabNavigator(
{
FirstList : FirstList ,
SecList : SecList ,
},
{
tabBarOptions: {
labelStyle: {fontSize: 13},
activeTintColor: color.basecolor,
inactiveTintColor: 'black',
scrollEnabled: false,
style: {
backgroundColor: 'white',
height:45
},
indicatorStyle: {
backgroundColor: color.basecolor,
}
},
title: 'Details',
}
);
const StackNavigator1 = createStackNavigator({
TabNavigator: {
screen: TabNavigator,
navigationOptions:({navigation})=>{
return{
header: (
<Head/>
)
}
},
},
List: {
screen: ThirList
navigationOptions:({navigation})=>{
return{
header: null
}
},
},
});
const RootNav = createAppContainer(StackNavigator1);
var name;
class Head extends React.Component {
constructor(props) {
super(props);
name='';
var today = new Date();
this.state = {
'date': today.getDate() + " " + monthNames[today.getMonth()] + " " + today.getFullYear()
};
console.log(JSON.stringify(this.props)+"userdata");
}
render() {
const {date} = this.state;
return (
<View>
<View style={{flexDirection: 'row', backgroundColor: color.mainback, height: 40,padding:10}}>
<Text style={{
fontSize: 14,
textAlign: 'left',
marginLeft: 10,
flex:1,
color:color.textcolor,
fontWeight:'bold',
textAlignVertical: "center"
}}>Orders</Text>
<Text style={{
fontSize: 10,
textAlign: 'right',
marginLeft: 20,
marginRight: 20,
fontWeight: 'bold',
color:color.datetextcolor,
textAlignVertical: "center"
}}>{date}</Text>
</View>
</View>
);
}
}
class RootScreen extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<RootNav/>
</View>
);
}
}
const StackNavigator = createStackNavigator({
DrawerNavigator: {
screen: RootScreen,
activeTintColor: color.basecolor,
navigationOptions: ({navigation}) => ({title: 'Home'}, {
headerLeft:
<View style={{flexDirection: 'row', marginLeft: 20}}>
<Icon name="menu" onPress={()=>navigation.dispatch(DrawerActions.toggleDrawer())} size={30} color="white"/>
<Image source={require('../images/logo.png')}
style={{height: 35, width: 150, resizeMode: 'contain'}}/>
</View>,
}
),
},
Dashboard: {
screen: DashBoard,
navigationOptions: {
headerTitle: (
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
<View style={{flex: 1, justifyContent: 'center'}}>
<Image
source={require('../images/logo.png')}
style={{height: 35, width: 150, marginLeft: -20, resizeMode: 'contain'}}
/>
</View>
</View>
),
},
},
}, {
defaultNavigationOptions: {
headerTintColor: 'white',
headerStyle: {
backgroundColor: color.basecolor,
},
}
}
);
const DrawerNavigator = createDrawerNavigator(
{
Home: StackNavigator
},
{
contentComponent: DrawerContent,
drawerWidth: 280,
navigationOptions: {
header: null
},
}
);
function mapStateToProps(state) {
return {
userdata: state.auth.userdata
}
}
export default connect(mapStateToProps) (DrawerNavigator);
Your aim is to connect Head component to Redux Store, right?
Simply using connect() function will suffice.
The solution would be to add this line of code.
const NewHead = connect(mapStateToProps)(Head)
Replace the <Head/> with <NewHead/> in StackNavigator1
Then, access the data within the Head component in the following manner.
this.props.userdata
OR
If you want to pass data to routes when you navigate to them, you can refer to this documentation.

React Native: How to swipe something off screen with bounce?

I'm trying to make something where you can swipe the overlay off the screen.
This is what I have so far using PanResponder, but I don't feel like it's very clean. It's my first time using it so I'm wondering if there's a better way of doing this.
I need to animate the green part and more so I'd like to build this by hand if possible without using a package.
My component looks like this (heavily copied off this guy:
https://github.com/brentvatne/react-native-animated-demo-tinder/blob/master/index.ios.js)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
PanResponder,
Animated,
Dimensions,
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000000',
},
overlay: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#0000ff',
},
video: {
position: 'absolute',
backgroundColor: '#00ff00',
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
function clamp(value, min, max) {
return min < max
? (value < min ? min : value > max ? max : value)
: (value < max ? max : value > min ? min : value)
}
export default class EdmundApp extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(),
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this.state.pan.setOffset({x: this.state.pan.x._value, y: 0});
this.state.pan.setValue({x: 0, y: 0});
},
onPanResponderMove: Animated.event([
null, {dx: this.state.pan.x, dy: 0},
]),
onPanResponderRelease: (e, {vx, vy}) => {
this.state.pan.flattenOffset();
if (vx >= 0) {
velocity = clamp(vx, 3, 5);
} else if (vx < 0) {
velocity = clamp(vx * -1, 3, 5) * -1;
}
if (Math.abs(this.state.pan.x._value) > 150) {
Animated.decay(this.state.pan, {
velocity: {x: velocity, y: vy},
deceleration: 0.98
}).start()
} else {
Animated.spring(this.state.pan, {
toValue: {x: 0, y: 0},
friction: 4
}).start()
}
}
});
}
render() {
let { pan } = this.state;
let translateX = pan.x;
let swipeStyles = {transform: [{translateX}]};
return (
<View style={styles.container}>
<View style={styles.video}></View>
<Animated.View style={[styles.overlay, swipeStyles]} {...this._panResponder.panHandlers}>
</Animated.View>
</View>
);
}
}
AppRegistry.registerComponent('EdmundApp', () => EdmundApp);
Please go through this https://github.com/oblador/react-native-animatable
There is an option for bounce and exit which will help you for sure.

Resources