I want to draw a animated circuler progress on which run with duration when i start animation it show not properly After Complete Animation it show only a
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import React,{Component} from 'react';
import PercentageCircle from 'react-native-percentage-circle';
import {
AppRegistry,
Image,
StatusBar,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
export default class FirstScreen extends Component {
componentDidMount() {
this.circularProgress.performLinearAnimation(100, 8000);
}
render() {
return (
<View>
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
backgroundColor="#3d5875"
ref={(AnimatedCircularProgress) => { this.circularProgress = AnimatedCircularProgress; }}/>
</View>
);
}
}
AppRegistry.registerComponent('GTproject', () =>FirstScreen);
The link i follow is https://github.com/bgryszko/react-native-circular-progress
The Screen shot of animation from start to end first it start a circle from 0 but one line from an other side is also with this circle as in show below link
First it show as https://ibb.co/kEZ2za
Then it show as
https://pictub.club/image/79MtJC
Then after complete circle it show only line
https://pictub.club/image/79M9WG
This sounds like this bug encountered with recent React Native versions on Android: https://github.com/bgryszko/react-native-circular-progress/issues/64
It's fixed in this fork: https://github.com/andreiciceu/react-native-circular-progress
Related
When switching the horizontal screen, the interface is fitted with vertical screen
This is my code
import React, { PureComponent } from 'react';
import { Text, View } from 'react-native';
import Root from './src/root';
import Orientation from 'react-native-orientation';
export class App extends PureComponent {
componentWillMount(){
Orientation.lockToLandscape()
};
render() {
return (
<Root />
)
}
}
export default App
Initial loading
and then I reload my app is Fine
How should I fix it
Did you try adding a this.forceUpdate() to trigger a rerender?
你只有在componentWillMount()的時候lockToLandscape()但app根本沒有被rerender所以當然顯示不出來啊
Hi I'm new to react so bear with me.
Below is my code...
import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, AsyncStorage} from 'react-native';
export default class App extends React.Component {
constructor(){
super();
this.state = {
myLeader: 'Joe',
};
}
onPress(){
alert({this.state.myLeader}); // 14
}
render() {
return (
<View>
<TouchableHighlight onPress={this.onPress.bind(this)}>
<Text>{this.state.myLeader}</Text>
</TouchableHighlight>
</View>
);
}
}
How to fix this problem?
error message is this. 'this is a reserved word(14.9) at Home.js:14.9'
I want to use {this.state.myLeader} in
onPress(){
alert({this.state.myLeader});
}
I tried 'bind(this)'
Any clue why?
Be careful with your usage of {}. In the context of JSX, {} can be used to "interpolate" a value within it. But if you're writing plain JavaScript code (as in alert({this.state.myLeader})) you don't need to interpolate anything, you just pass the value this.state.myLeader to alert, as in alert(this.state.myLeader).
Regarding the usage of alert within React Native, you'll probably want to follow #kytwb's advise and use Alert.alert.
Try to replace line 14 with:
console.log(this.state.myLeader)
To use Alert with React Native, take a look at the doc.
First, import Alert from react-native:
import { StyleSheet, Alert, Text, View, TouchableHighlight, AsyncStorage} from 'react-native';
Then, change the onPress function:
onPress(){
Alert.alert(this.state.myLeader); // 14
}
Another solution is to forget about the bind and do this:
onPress = () => {
alert({this.state.myLeader}); // 14
}
<TouchableHighlight onPress={this.onPress}>
Is this conditional styling below still works with react native?
style={[styles.base, this.state.active && styles.background]}
When the component is mounted, the active state is set to false.
The screen has a button to change the active state to true. Then, I would expect the background style to be displayed. But it is not the case unless the page reload.
Any thought ?
Thanks
It sounds like you'd be interested in using the Animated Module from react-native. By using the Animated module, you can have styles that change or animate. You could also use LayoutAnimation. You should read the Animation Documentation and LayoutAnimation documentation.
You can start off by using LayoutAnimation and see if that does what you need. It's quick to set up!
Here's an example:
import React, { Component} from 'react';
import { View, LayoutAnimation, UIManager, Platform } from 'react-native';
class MyComponent extends Component {
constructor(props) {
super(props);
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
componentWillUpdate() {
LayoutAnimation.spring() // automatimagically animates style changes
}
render() {
<View style={[styles.base, this.state.active && styles.background]}>
</View>
}
}
So i am stuck in there. I just want to add a but it never renders it.
It renders the "Registered project page".
index.ios.js
import native from './src';
native();
./src/index.js
import { AppRegistry, Text } from 'react-native';
import React, { Component } from 'react';
export default function index() {
class Root extends Component {
render() {
return (
<Text>
Welcome to React Native!
</Text>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => Root);
}
So it all works great. I can even debug and see that the App component is called etc. But why i never get to render anything except that window ?
react-native Dimensions.get("window").width return 375 for an iPhone 6s....
it seems far from correct.
`
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions
} from 'react-native';
class AwesomeProject extends Component {
render() {
return <Text style={{margin:50}}>Width: {Dimensions.get("window").width}</Text>;
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);`
375 is the number of points across for the iPhone 6. For most things, points will be fine. But if you need pixels, you can use the PixelRatio API provided by React Native.
For example, to get the distance across the iPhone in rendered pixels you could use Dimensions.get('window').width * PixelRatio.get(), which should return 750 for the iPhone 6.