I am using Expo and React Native and I want to display a Lottie animation. On iOS this works like a charm - on Android the animation will play once and then it will not play again. It seems that reset() somehow behaves strange.
What am I doing wrong here? You can also have a look at a corresponding Expo snack.
import { Button, View } from 'react-native';
import React, { useRef } from 'react';
import LottieView from 'lottie-react-native';
import likeAnimation from './assets/animation.json';
export default function App() {
const animation = useRef(null);
const onPress = () => {
animation.current.play();
};
const onAnimationFinish = () => {
animation.current.reset();
}
return (
<View style={{ paddingTop: 200, backgroundColor: '#dddddd', flex: 1 }}>
<LottieView
loop={false}
speed={1.5}
autoSize
ref={animation}
source={likeAnimation}
onAnimationFinish={onAnimationFinish}
/>
<Button onPress={onPress} title="Click me!" />
</View>
);
}
Related
I am testing the vibrate feature for ios using expo and it seems pretty straight forwared on the docs. For some reason though I can not get the iphone to vibrate. I can get it to console log at the time of vibrate call. Any ideas on how I can get this working?
app.js toy example
import * as React from 'react';
import { Text, View, StyleSheet, Vibration, TouchableOpacity } from 'react-native';
export default function App() {
const startVibration = () => {
console.log('start vibration')
Vibration.vibrate()
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => startVibration()}>
<Text>Vibrate Once</Text>
</TouchableOpacity>
</View>
)}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#efefef',
padding: 8,
},
});
I went into the settings on an iphone and toggled vibrate on silent and vibrate on ring and now the vibrate works.
I've been dealing with the problem mentioned below for a few days ... My problem is with ReactNative FlatList. I use Expo and instead of using simulation I use real devices (Iphone 11 and Xiaomi Redmi Note7).
With the code below, FlatList renders smoothly on Iphone 11, while it enters an endless loop on mobile phones with Android operating systems such as Xiaomi and Samsung. View under RenderItem function comes but its content is not available.
Also, although there are three objects under state.data(checked with console.log), FlatView is rendered infinitely.
Has anyone encountered this situation before? How can I resolve this situation?
Thanks in advance.
Here is my code;
/*
Lights
Ahmet BOZ
21.11.2020
*/
import React, {Component} from 'react';
import { StyleSheet, Text, View, ScrollView, Button, TouchableOpacity, FlatList } from 'react-native';
import Warning from "../components/Warning";
import Logo from "../components/Logo";
import Light from '../components/Light';
import axios from 'axios';
import Loading from '../components/Loading';
export default class Lights extends Component {
state = {
loading: true,
data:[]
}
setAllLights = async () => {
const {data : data} = await axios.get('http://API_URL')
this.setState({
data,
loading: false
})
}
componentDidMount(){
this.setAllLights();
}
renderLights = ({item, index}) => {
return(
<TouchableOpacity
onPress={() => this.props.navigation.navigate('LightDetail', { lightid: item.light_id,})}
style={styles.svLight}>
<Text style={{color:'#ffca3a'}}>{item.light_name}</Text>
</TouchableOpacity>
)
}
render() {
const {lightName, lightId} = this.state;
return (
<View style={styles.LightsWrapper}>
{this.state.loading && <Loading />}
<View style={styles.main}>
<View style={styles.svInformation}><Text style={{color:'#efefef'}}>All lights sorted by alphabetical</Text></View>
<FlatList style={styles.sv}
renderItem={this.renderLights}
numColumns={3}
keyExtractor={item => item.light_id}
data = {this.state.data}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
LightsWrapper: {
flex:1,
},
main: {
flex:1,
backgroundColor:'#1b263b',
},
svInformation: {
justifyContent:'center',
alignItems:'center',
backgroundColor:'brown',
paddingVertical:5,
marginBottom:5,
},
svRow: {
paddingVertical:3,
flexDirection:'row',
justifyContent:'space-between',
},
svLight:{
flex:1,
borderColor:'#fff',
justifyContent:'center',
alignItems:'center',
paddingVertical:20,
borderWidth:1,
borderColor:'#ffca3a',
flexDirection:'row',
borderRadius:3,
marginBottom:2,
}
});
I am working with Webview in React native.
Header and footer is not webview, and header includes navigation.goBack() button in it.
But it is not working even footer has navigation.navigate() button which is working.
Here is my code.
import 'react-native-gesture-handler';
import * as React from "react";
import { ImageBackground, StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from "react-native";
import { AntDesign } from '#expo/vector-icons';
import { WebView } from 'react-native-webview';
import { height, width } from 'react-native-dimension';
import HeaderLink from './header_link';
import Footer from './footer';
const styles = StyleSheet.create({
container: {
flex: 1,
// flexDirection: "column"
},
});
class LinkPageScreen extends React.Component {
render() {
this.state = {
url: this.props.route.params.url,
title: this.props.route.params.title,
};
var linkURL = this.state.url;
return (
<View style={styles.container}>
<HeaderLink
image={false}
imageSource={{}}
left={
<TouchableOpacity onPress={ () => this.props.navigation.goBack(null) }>
....
</TouchableOpacity>
}
/>
<WebView
source={{uri: linkURL}}
style={{marginTop: height(12), marginBottom: height(11)}}
/>
<Footer navigation={this.props.navigation} />
</View>
)
}
}
export default LinkPageScreen
I changed navigation.goBack into navigation.navigate() but it was not working also in header.
I checked for same error on stackoverflow but webview.goback() function was there, and my problem is not like that. I am sure.
I found the solution. Even I don't know why.
I changed the code like below.
class LinkPageScreen extend React.component {
render() {
return (
<View>
<WebView .... />
<Header />
<Footer />
......
Unbelivably it works, i just changed the order of tags between webview and header.
Anyone can explain to me why this is happening?
Thanks.
You can try the code below:
import { useNavigation } from '#react-navigation/native';
const {goBack} = useNavigation();
const navigateBack = useCallback(() => {
goBack();
}, [goBack]);
.
.
.
<TouchableOpacity onPress={navigateBack}>
....
</TouchableOpacity>
I have try to use textAlign: 'justify' property in react native.TextAlign justify doesn't work on Android.
React native version: "react-native": "0.59.5"
import React from 'react';
import { Image, View } from 'react-native';
import { Text, Button } from 'native-base';
import { connect } from 'react-redux';
import EStyleSheet from 'react-native-extended-stylesheet';
import { colors } from '../styles';
class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.contentCenter}>
<Text style={[styles.titleContent,styles.fontBold]}>Simple Secure</Text>
<Text style={[styles.titleContent,styles.fontBold]}>Reliable Messaging</Text>
</View>
</View>
);
}
}
const styles = EStyleSheet.create({
titleContent: {
color:'#62778c',
fontSize: '1.4rem',
textAlign: 'justify',
}
});
const mapStateToProps = (state) => {
return {};
};
export default connect(mapStateToProps)(Login);
checkout the offical document:
textAlign: enum('auto', 'left', 'right', 'center', 'justify')
Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.
As mentioned above android does not support text justification but you can go around this by adding the html text inside WebView like this:
<WebView
source={{ html: "<p style='text-align:justify;'>Your justified text</p>" }}
/>
How can I add a view to the bottom of the screen with the click of a button, which is at the top of the screen, in React Native?
you make the view at the bottom of the screen conditionally render based on a state and you set it that state to be true on the OnPress method of the button
I think it is better to learn more about state and props and other fundamental concepts in react/react-native first:
https://facebook.github.io/react-vr/docs/components-props-and-state.html
but here is how you can do this:
You need to define a state if you can view that section as
false
, then when the button pressed, change the value of that state to
true
import React from 'react';
import {Text,View,TouchableOpacity} from 'react-native';
export default class testComponent extends React.Component {
constructor(){
super()
this.state = {
viewSection :false
}
}
renderBottomComponent(){
if(this.state.viewSection) {
return (
<View>
<Text>Hi!</Text>
</View>
)
}
}
buttonPress=()=>{
this.setState({viewSection:true})
}
render() {
return (
<View >
<TouchableOpacity onPress={this.buttonPress}>
<Text> Click Me!</Text>
</TouchableOpacity>
{this.renderBottomComponent()}
</View>
);
}
}
You can try this,
According to my knowledge this is what you want
import React, { useState } from 'react';
import { Button, View } from 'react-native';
export default function Testing() {
const Square = () => (
<View style={{
width: 50,
height: 50,
margin: 10,
backgroundColor: "green",
}} />
);
const [squares, setSquares] = useState([<Square />, <Square />, <Square />]);
return (
<View >
{squares.map(v => v)}
<Button title='add' onPress={() => setSquares([...squares, <Square />])} />
</View >
)
}