3D Animations on View with React Native - android

I want to implement a flip effect in my React Native app, similar like described here:
https://www.codementor.io/reactjs/tutorial/building-a-flipper-using-react-js-and-less-css
My question is. Can I achieve it somehow with the help of some library like 'Animations' https://facebook.github.io/react-native/docs/animations.html or I have to play with 'plain' CSS styles.
What is the 'good practive' for such animations in React Native?
class CardBack extends Component {
render() {
return (
<TouchableOpacity onPress={this.flip}>
<View style={styles.scrumCardBorder}>
<View style={styles.cardBack}>
</View>
</View>
</TouchableOpacity>
);
}
flip() {
this.setState({flipped: !this.state.flipped})
}
}
class CardFront extends Component {
render() {
return (
<TouchableOpacity>
<View style={styles.scrumCardBorder}>
<View style={styles.cardFront}>
<Text style={styles.cardValue}>5</Text>
</View>
</View>
</TouchableOpacity>
);
}
}


We can use transform and Interpolate to make 3D rotate Animation.
class RotateAnimation extends React.Component {
_rotateValue = new Animated.Value(0);
startAnimated = () => {
Animated.timing(this._rotateValue, {
toValue: 360,
duration: 800,
useNativeDriver: true
}).start()
}
getTransform = () => {
const rotate = this._rotateValue.interpolate({
inputRange: [0, 180, 360],
outputRange: ['0deg', '180deg', '360deg'],
extrapolate: 'clamp',
})
if (this.props.horizontal) {
return {
transform: {
perspective: WINDOW_WIDTH,
rotateX: rotate
}
}
}
return {
transform: {
perspective: WINDOW_WIDTH,
rotateY: rotate
}
}
}
render() {
return (<Animated.View style={[style, ]} />
{this.props.children}
</Animated.View>)
}
}
If you want to use transform around a certain point. Can try this.


Use Animated api for these transformations.
Note: Rotation along the axis(ie, rotateX or rotateY) with perspective will give you the feel of flipping.
Always use useNativeDriver: true for better performance.
Example code:
import React, {Component} from 'react';
import {View, Animated, StyleSheet, Button} from 'react-native';
export default class Container extends Component {
constructor() {
super();
this.animation = new Animated.ValueXY({x: 0, y: 0});
const inputRange = [0, 1];
const outputRange = ['0deg', '180deg'];
this.rotateX = this.animation.x.interpolate({inputRange, outputRange});
this.rotateY = this.animation.y.interpolate({inputRange, outputRange});
}
flip = (val) => {
this.animation[val].setValue(0);
Animated.timing(this.animation[val], {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
};
render() {
const {rotateX, rotateY} = this;
return (
<View style={styles.container}>
<Animated.View
style={{
...styles.item,
transform: [{rotateX}, {rotateY}, {perspective: 500}],
}}
/>
<Button title="flip x " onPress={() => this.flip('x')} />
<Button title="flip y " onPress={() => this.flip('y')} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {flex: 1, alignItems: 'center', justifyContent: 'center'},
item: {
height: 200,
width: 200,
backgroundColor: 'red',
marginBottom: 20,
},
});

Related

react-native-vision-camera doesn't appears after initialization

react-native-vision-camera doesn't appears after initialization
I was expecting Camera or something like this but screen stucks on Loading
I've tried a lot of things but couldn't solve the problem. Documentation didn't give any of useful information
import { Alert, StyleSheet, View } from "react-native";
import { Camera, useCameraDevices } from "react-native-vision-camera";
import { Loading } from "../components/Loading/Loading";
export const CameraScreen: FC = () => {
const devices = useCameraDevices();
const device = devices.back;
if (device == null) return <Loading />;
return (
<View style={style.screen}>
<Camera
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
/>
</View>
);
};
const style = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: "#222",
},
camera: {
flex: 1,
alignItems: "center",
justifyContent: "flex-end",
},
});```

Put cameraRef on component.
const cameraRef = React.useRef(null);
<Camera
ref={cameraRef} /* use cameraRef.current.takePhoto(): Promise<dataPhoto> */
photo={true} /* or video={true} */
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
/>
See oficial docs.

ReactNative Android arrow function not showing data dynamically inside render

I am learning React Native and i am trying to display some dynamic data using for loop and arrow function.
I am facing issues exactly data is not showing on screen but inside log it is printing for loop data.
What is wrong in this code ? As i am only able to see 49 as a value in console.warn.
Code
import React, { Component } from 'react';
import { StyleSheet, View, Text, ScrollView, Platform, Alert } from 'react-native';
export default class MyApp extends Component {
constructor() {
super();
}
dynamicList = () => {
var myloop = [];
for (let i = 0; i < 50; i++) {
console.warn(i)
myloop.push(
<View key={i} style={styles.item}>
<Text style={styles.item_text_style} onPress={() => { Alert.alert('Alert', `Title ${i.toString()}`) }}>Title {i}</Text>
<View style={styles.item_separator} />
</View>
);
}
}
render() {
return (
<ScrollView>
<View >
<Text >Welcome to React Native!</Text>
{this.dynamicList()}
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
paddingTop: 25
},
item_text_style:
{
fontSize: 20,
color: '#000',
padding: 10
},
item_separator:
{
height: 1,
width: '100%',
backgroundColor: '#263238',
}
});

wrap your function in componentDidMount() above render, like
componentDidMount(){
this.dynamicList()
}
Also, you are pushing your items in an array, so should use javasSript map method to display the key value pairs from an array

Please update your dynamicList function to following
dynamicList = () => {
var myloop = [];
for (let i = 0; i < 50; i++) {
console.warn(i)
myloop.push(
<View key={i} style={styles.item}>
<Text style={styles.item_text_style} onPress={() => { Alert.alert('Alert', `Title ${i.toString()}`) }}>Title {i}</Text>
<View style={styles.item_separator} />
</View>
);
}
return myloop;
}

'react-native-image-picker' Error while updating property 'src' of a view managed by: RCTImageView

Does anyone know how to resolve this error?
"Error while updating property 'src' of a view managed by:
RCTImageView"
This error appear when the component is rendering. I think that the images do not give them time to download or something like this.
Dependences:
"firebase": "^4.8.2",
"react": "16.0.0-alpha.12",
"react-native": "0.47",
"react-native-image-picker": "^0.26.7",
ERROR
Gallery.js
import React, { Component } from 'react';
import { View, Image, ScrollView, StyleSheet, Dimensions } from 'react-native';
import { connect } from 'react-redux';
import firebase from '../../config/firebase';
import { nameChanged } from '../../actions';
import { CardSectionTransp, InputBlack } from '../common';
import { SnapshotToArray } from '../../config/helpers';
const { width, height } = Dimensions.get('window');
class EventDetail extends Component {
constructor(props) {
super(props);
this.state = {
images: [],
objImages: []
};
}
componentWillMount() {
firebase.database().ref().child('images').orderByChild('order').once('value', snapshot => {
const images = SnapshotToArray(snapshot);
this.setState({ objImages: images });
const arrayImages = [];
for (const image of images) {
const starsRef = firebase.storage().refFromURL('gs://bealegendapp.appspot.com/images/' + image.path);
// Get the download URL
starsRef.getDownloadURL().then((url) => {
arrayImages.push(url);
this.setState({ objImages: arrayImages });
}).catch((error) => {
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case 'storage/object_not_found':
// File doesn't exist
break;
case 'storage/unauthorized':
// User doesn't have permission to access the object
break;
case 'storage/canceled':
// User canceled the upload
break;
case 'storage/unknown':
// Unknown error occurred, inspect the server response
break;
default:
break;
}
});
}
});
}
onNameChange(text) {
this.props.nameChanged(text);
}
render() {
return (
<ScrollView style={styles.container}>
<CardSectionTransp>
<InputBlack
label="Nombre"
onChangeText={this.onNameChange.bind(this)}
value={this.props.name}
/>
</CardSectionTransp>
<View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 }}>
{this.state.objImages && this.state.objImages.length > 0 &&
this.state.objImages.map((image, key) => {
return (
<View key={key} style={{ width: width / 3 }}>
<Image <-------------EEEEEEERRRRRRRROOOOOOORRRRRRR!!!!
source={{ uri: image }}
style={styles.image}
/>
</View>
);
})
}
{this.props.photos &&
this.props.photos.map((image, key) => {
return (
<View key={key} style={{ width: width / 3 }}>
<Image
source={{ uri: image }}
style={styles.image}
/>
</View>
);
})
}
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
paddingBottom: 123
},
image: {
height: height / 5,
resizeMode: 'contain',
width: width / 3,
borderWidth: 1,
borderColor: 'white'
}
});
const mapStateToProps = ({ gallery }) => {
const { name, photos } = gallery;
return { name, photos };
};
export default connect(mapStateToProps, {
nameChanged
})(EventDetail);

Resolved.
I was trying to get storage uri in Component. Is better get it when upload an image and save it in DataBase.
Then... I only to request Images and put storage uri saved in DataBase in source={{ uri: }}.

For anyone else that happens across this issue - i also had it and temporarily got around it with:
{ this.state.myImage !== '' ?
<View>
<Image source={this.state.myImage} />
<Button title="keep img?" onPress={this.setImage} />
</View> : null
}

How to set a correct layout param just like FrameLayout in React-Native layout?

What I wanna do is creating a frame layout just like android's FrameLayout and I have failed several times reasonably. That's why I am here.
Expected scene:
1: Creating a map view in the bottom layer.(Native component)
2: Showing a marker on the map view. (Native component as above)
3: Placing a search widget on the top frame.(React component)
Here is the layout in a react-native page, named page.js:
<MapLayout>
<TextInput style={ marginTop: 20, borderRadius: 5, padding: 5, marginLeft: 16, marginRight: 16, width:100, height: 100 ,backgroundColor:'red'}} placeholder='search'></TextInput>
</MapLayout>
Note:MapLayout is a native component from android, which extends from FrameLayout and can be exported to React-Native. There is a MapView widget in the bottom layer as a background, probably with a overlay on the map.
Give me a hand please. Thanks for all kindness first.

you can do frame layout using this way
import React, { Component } from "react";
import { Animated, View, StyleSheet, Easing, Text } from "react-native";
class A extends Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
}
handleAnimation = () => {
Animated.timing(this.animatedValue, {
toValue: 1,
duration: 500,
easing: Easing.ease
}).start();
};
render() {
return (
<View style={styles.container}>
<View style={styles.layer1} />
<View style={styles.overLay}>
<Text>This is an overlay area</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
layer1: {
height:100,
backgroundColor: "lightgreen",
},
overLay: {
height: 100,
width: "100%",
backgroundColor: "#00000070",
position: "absolute",
}
});
export default A;

Navigate user to New Screen on listitem click React native

I am trying to navigate user to next screen when user click on list item. I am trying to make use of Navigator in this , i am newbie to react , there is Redux and Flux two different architecture as i am not every much good in react so i am little confuse with there working.We can navigate user by using Navigator and also by using Action. Here is my class :-
ERROR i am Getting is :- undefined is not a function(evaluating '_this4.goDetailPage(rowData)')
Today.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
import {FeedStack} from './movielistdeatilrouter';
export default class TodayView extends Component {
constructor(props , context) {
super(props , context);
}
render() {
return (
<FeedStack />
);
}
}
movielistdeatilrouter.js : -
import React from 'react';
import {StackNavigator } from 'react-navigation';
import MovieDeatilScreen from './MovieDeatilScreen';
import Movielisting from './movielisting';
export const FeedStack = StackNavigator({
Movielisting: {
screen: Movielisting,
navigationOptions: {
title: 'Movielisting',
},
},
MovieDeatilScreen: {
screen: MovieDeatilScreen,
navigationOptions: ({ navigation }) => ({
title: 'MovieDeatilScreen',
}),
},
});
movielistiing.js :-
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation';
import { Actions, ActionConst } from 'react-native-router-flux';
import home from '../images/home.png';
import MovieDeatilScreen from './MovieDeatilScreen'
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
import {
StyleSheet,
Text,
Image,
View,
AsyncStorage,
TouchableOpacity,
TouchableHighlight,
Dimensions,
ListView
} from 'react-native';
const uri = 'http://csswrap.com/wp-content/uploads/2015/03/showmenu.png';
export default class Movielisting extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
moviesData: ds.cloneWithRows([]),
};
}
componentDidMount() {
this.fetchMoviesData();
}
fetchMoviesData() {
var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=17e62b78e65bd6b35f038505c1eec409';
fetch(url)
.then(response => response.json())
.then(jsonData => {
this.setState({
moviesData: this.state.moviesData.cloneWithRows(jsonData.results),
});
})
.catch( error => console.log('Error fetching: ' + error) );
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
</View>
);
}
renderRow(rowData){
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={() => this.goDeatilPage(rowData)}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</TouchableOpacity>
</View>
);
}
goDeatilPage = (rowData) => {
alert('hi');
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
this.props.navigation.navigate('MovieDeatilScreen');
};
}
const styles = StyleSheet.create({
container: {
position:'relative',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},action: {
flex: 0.4,
},thumb: {
backgroundColor: '#ffffff',
marginBottom: 5,
elevation: 1
},
img: {
height: 300
},
txt: {
margin: 10,
fontSize: 16,
textAlign: 'left'
},ListViewcontainer:{
marginTop:50,
bottom: 50,
}
});
Index.android.js :-
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
StatusBar,
View
} from 'react-native';
import App from './app';
import DrawerMenu from './Drawer/drawer-toolbar-android';
import BookmarkView from './Pages/bookmark';
import CalendarView from './Pages/calendar';
import ClientView from './Pages/client';
import InfoView from './Pages/info';
import SettingsView from './Pages/setting';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
const stackNavigator = StackNavigator({
Info: { screen: InfoView },
Settings: {screen: SettingsView },
Bookmark: {screen: BookmarkView },
Calendar: {screen: CalendarView},
Client: {screen: ClientView},
}, {
headerMode: 'none'
});
const easyRNRoute = DrawerNavigator({
Home: {
screen: App,
},
Stack: {
screen: stackNavigator
}
}, {
contentComponent: DrawerMenu,
contentOptions: {
activeTintColor: '#e91e63',
style: {
flex: 1,
paddingTop: 15,
}
}
});
AppRegistry.registerComponent('flightbot', () => easyRNRoute);
App.js class :-
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
StatusBar,
View
} from 'react-native';
import { Navigator, NativeModules } from 'react-native';
import { COLOR, ThemeProvider } from 'react-native-material-ui';
import { Toolbar, BottomNavigation, Icon } from 'react-native-material-ui';
import Container from './Container';
import { TabRouter } from 'react-navigation';
import TodayView from './Contents/today';
import ProfileView from './Contents/profile';
import MapView from './Contents/map';
import ChatView from './Contents/chat';
const uiTheme = {
palette: {
primaryColor: COLOR.green500,
accentColor: COLOR.pink500,
},
toolbar: {
container: {
height: 70,
paddingTop: 20
}
}
}
const TabRoute = TabRouter({
Today: { screen: TodayView },
Profile: { screen: ProfileView },
Map: { screen: MapView },
Chat: {screen: ChatView}
}, {
initialRouteName: 'Today',
}
);
class TabContentNavigator extends Component {
constructor(props, context) {
super(props, context);
this.state = {
active: props.value.active,
};
}
//this method will not get called first time
componentWillReceiveProps(newProps){
this.setState({
active: newProps.value.active,
});
}
render() {
const Component = TabRoute.getComponentForRouteName(this.state.active);
return <Component/>;
}
}
export default class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
active: 'Today',
};
}
static navigationOptions = {
title: 'Menu',
};
navigate() {
this.props.navigation.navigate('DrawerOpen'); // open drawer
}
render() {
return (
<ThemeProvider uiTheme={uiTheme}>
<Container>
<StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent />
<Toolbar
leftElement="menu"
centerElement={this.state.active}
onLeftElementPress={() => this.navigate()}
/>
<TabContentNavigator value={this.state} key={this.state} />
<BottomNavigation active={this.state.active}
hidden={false}
style={{ container: { position: 'absolute', bottom: 0, left: 0, right: 0 } }}
>
<BottomNavigation.Action
key="Today"
icon="today"
label="Today"
onPress={() => this.setState({ active: 'Today' })}
/>
<BottomNavigation.Action
key="Profile"
icon="person"
label="Profile"
onPress={() => {
this.setState({ active: 'Profile' });
}}
/>
<BottomNavigation.Action
key="Map"
icon="map"
label="Map"
onPress={() => this.setState({ active: 'Map' })}
/>
<BottomNavigation.Action
key="Chat"
icon="chat"
label="Chat"
onPress={() => this.setState({ active: 'Chat' })}
/>
</BottomNavigation>
</Container>
</ThemeProvider>
);
}
}
i am trying my level best to solve this , its almost 3 days today i am looking for solution that how i can do this , i just want to open a new Screen on click on list item. Can any one tell me how to do that.I will be very Grateful if some one let me know the way to navigate to next screen.
ScreenShot of my Error :-
Thanks!!!

Using "React Navigation" should help you to do the trick.
For more information, you can find it here: https://reactnavigation.org
Cheers,
====== UPDATE ======
I believe the way you set up the Today component is incorrect, and also your question is unclear, it took me a while to understand what you're wanting to do.
Anyway, Today component should be a StackNavigator if you want to open a detail screen from it, and it will control 2 screens (ListScreen and DetailScreen):
const TodayView = StackNavigator({
List: {
screen: ListScreen,
},
Detail: {
screen: DetailScreen,
},
});
Then setup your screens like this:
class ListScreen extends Component {
static navigationOptions = {
title: 'List',
}
constructor(props , context) {
super(props , context);
this.goToDetailScreen = this.goToDetailScreen.bind(this);
}
goToDetailScreen() {
this.props.navigation.navigate('Detail');
}
render() {
return (
<TouchableOpacity onPress={() => this.goToDetailScreen()}>
<Text>GO TO DETAIL</Text>
</TouchableOpacity>
);
}
}
class DetailScreen extends Component {
static navigationOptions = {
title: 'Detail',
}
render() {
return (
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text>BACK TO LIST SCREEN</Text>
</TouchableOpacity>
);
}
}
There is an example calling "StacksInTabs" in their Github repo, that you might want to take a look at it: https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js
Cheers,

Finally it works , this is how i do following change in code . :-
<View style={styles.container}>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow.bind(this)}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
</View>
I just added .bind(this) function to renderRow.
Rest is Same :-
renderRow(rowData){
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={()=>this.goDeatilPage(rowData)}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</TouchableOpacity>
</View>
);
}
goDeatilPage = (rowData) => {
alert('hi');
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
this.props.navigation.navigate('MovieDeatilScreen');
}
Thanks #Goon for your Time i highly Appreciate your effort. Thank you Brother.

Use React Navigation for navigate screen, it is very Easy-to-Use,
Create 3 class in react native
defined navigator class
2.first screen
3.navigate screen
1.Basic.js
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: Movielistiing},
Detail: {screen: Movielistdeatilrouter},
});
module.exports = BasicApp;
2.Movielistiing.js
class Movielistiing extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to movie detail"
onPress={() =>
navigate('Detail', { name: 'Jane' })
}
/>
);
}
}
3.Movielistdeatilrouter.js
class Movielistdeatilrouter extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}

Categories

Resources