I use react-native-router-flux for my navigation. I have a problem with Actions.refresh(). When I execute it nothing happen ...
import React, { Component } from 'react';
import {
View,
Text,
Button,
} from 'react-native';
export default class Picture extends Component {
constructor(props) {
super(props);
console.log("Constructor picture")
}
componentWillMount() {
console.log('Will mount picture')
}
componentWillUpdate() {
console.log("Will Update picture")
}
componentWillUnmount() {
console.log("will Unmont picture")
}
render() {
console.log("render Picture")
return (
<Button title='refresh' onPress={() => Actions.refresh()}/>
)
}
}
Someone know how use it ?
You Can Pass Props as per You Need . you Can Find Props Details on nodel_modules/react-native-router-flux/src/navigationStore.js
_helloFunction = () => {
alert("Hello");
}
componentDidMount() {
Actions.refresh({
right: () => alert("Right"),
left: this._helloFunction
});
}
Related
In my application, I created a timer component. This is a smart component because I wanted to handle the counter state inside the component.
this is my code
import React, { Component } from "react";
import {
View,
Text,
StyleSheet
} from "react-native";
import { RoundedButton} from "../../mixing/UI";
class Timer extends Component {
constructor(props) {
super(props);
this.state = {
counter: 30
}
this.interval = null;
}
componentWillUnmount() {
cleanUp();
}
cleanUp = () => {
clearInterval(this.interval);
}
decreaseCounter = () => {
if (this.state.counter === 0) {
return this.cleanUp();
}
this.setState({counter: this.state.counter - 1});
}
startCounter = () => {
this.interval = setInterval(this.decreaseCounter, 1000);
}
render() {
return (
<View>
<RoundedButton text='Log in' onPress={() => this.startCounter()} />
<Text>{this.state.counter}</Text>
<RoundedButton text='Log in' onPress={() => this.cleanUp()} />
</View>
);
}
}
// styles
const styles = StyleSheet.create({
});
export default Timer;
Now I want to call this from my parent screen. If I pass the counter as a prop,
Now the counter state can't be handled from Timer component. How can I handle the state of the child based on the parent prop.
you can use react component lifecycle componentDidMount()
componentDidMount(){
this.setState({counter: this.props.counter});
}
There after you can use this.setState({counter: this.state.counter - 1})
I am complete noob and am just following a tutorial in react-native on udemy. However, I have reached a wall and cannot find a solution anywhere?
Currently I am getting an error from ESLint showing that state is undefined.
Here is the complete code:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
class AlbumList extends Component {
state = { albums: [] }; //state is underlined
ComponentWillMount() {
axios.get('https:/rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ albums: response.data }));
}
renderAlbums() {
render() {
console.log(this.state);
return (
<View>
{this.renderAlbums()}
</View>
**strong text**);
}
}
export default AlbumList;
Has there been any update regarding defining 'state' in React-Native?
Sincerely appreciate the help!
Try this out.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
class AlbumList extends Component {
constructor(props){
super(props);
this.state = {
albums: []
};
this.renderAlbums = this.renderAlbums.bind(this);
}
componentWillMount() {
axios.get('https:/rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ albums: response.data }));
}
renderAlbums() {
return (
<View /> // return your Albums here as you need
);
}
render() {
return (
<View>
{this.renderAlbums()}
</View>
);
}
}
export default AlbumList;
I just have a question regarding react-navigation.
I understand that the navigation props becomes accessible when a screen is rendered from the stacknavigator.
But how do you access the navigation props if the screen is not rendered by the stacknavigator?
Like this:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import Swiper from 'react-native-swiper';
import Menu from './Menu';
class HomeSwiper extends Component {
static propTypes = {
navigation: PropTypes.object,
};
render() {
return (
<Swiper showsButtons>
<View>
<Menu
navigationProps={this.props.navigation}
/>
</View>
<View>
<Text>Hello Swiper</Text>
</View>
</Swiper>
);
}
}
export default HomeSwiper;
Wherein Menu is:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AsyncStorage, TouchableOpacity, Text, BackHandler, Alert } from 'react-native';
import { StandardContainerIOS } from '../components/Container';
import { StandardButton } from '../components/Buttons/';
class Menu extends Component {
static propTypes = {
navigation: PropTypes.object,
};
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
const headerLeft = (
<TouchableOpacity
onPress={params.handleRedirect ? params.handleRedirect : () => null}
>
<Text>Logout</Text>
</TouchableOpacity>
);
return {
headerLeft,
};
};
constructor(props) {
super(props);
this.state = {
email: '',
petName: [],
numberOfPets: '',
};
}
getInitialState() {
return {
petName: ['No Name'],
};
}
async componentWillMount() {
try {
const value = await AsyncStorage.getItem('email');
if (value !== null) {
// We have data!!
}
} catch (error) {
// Error retrieving data
}
this.props.navigation.setParams({
handleRedirect: this.handlePressLogout,
});
this.getEmail();
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}
render() {
return (
<StandardContainerIOS>
<StandardButton backgroundColor="#6D4C41" title="View Pet" onPress={this.handleIndexView} />
<StandardButton backgroundColor="#6D4C41" title="Register Pet" onPress={this.handlePressRegisterPets} />
<StandardButton backgroundColor="#6D4C41" title="Logout" onPress={this.handlePressLogout} />
</StandardContainerIOS>
);
}
}
export default Menu;
I've removed the other function definition to cut the post a little shorter. The Menu screen was working fine when it was rendered from the stacknavigator. Im trying to incorporate swiping in my app.
Any suggestions?
I am trying to run a background task using headlessjs in react-native. The problem is that I am unable to access the async task inside the component in order to show it on the view. Here's my default component.
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
NativeModules
} from 'react-native';
module.exports = NativeModules.ToastAndroid;
someTask = require('./SomeTaskName.js');
export default class test2 extends Component {
constructor() {
super()
this.state = {
myText: 'My Original Text'
}
}
updateText = () => {
this.setState({myText: 'My Changed Text'});s
}
componentDidMount(){
this.setState({myText: someTask});
someTask.then(function(e){ //<--- error
console.log("lala" + e);
});
}
render() {
return (
<View>
<Text>
abc
</Text>
</View>
);
}
}
AppRegistry.registerComponent('test2', () => test2);
AppRegistry.registerHeadlessTask('SomeTaskName', () => someTask);
As mentioned in the code, I get the error undefined is not a function. I don't know how to make this work. My SomeTaskName.js looks like this.
SomeTaskName.js
module.exports = async (taskData) => {
return taskData.myname;
}
The idea is to simply get the data from the service and show it on the UI.
The solution was to simply move the code inside the componentDidMount function. Here's how I achieved it.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
Image
} from 'react-native';
export default class test2 extends Component {
constructor() {
super()
this.state = {
myText: '1'
}
}
componentWillUnmount() {
}
componentDidMount(){
someTask = async (taskData) => {
this.setState({ myText: taskData.myname});
}
};
}
render() {
return (<Text>Working</Text>);
}
}
AppRegistry.registerHeadlessTask('SomeTaskName', () => someTask);
AppRegistry.registerComponent('test2', () => test2);
You can replace :
someTask = require('./SomeTaskName.js');
by
import SomeTaskName from './SomeTaskName'
I've the following code, it works fine I can connect to an API and fetch the data, since I'm getting a huge list of threads how can I refactor the code using Flatlist instead?
thanks
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import ThreadDetail from './ThreadDetail';
class TopicList extends Component {
state = {
threads: []
};
componentWillMount() {
axios.get('https://xxxxxxx.devmn.net/api/v1/forums/threads?topic_id=2418', {
headers: {
'client-id': 'a0f21e'
}
})
.then(response => this.setState({ threads: response.data.threads }));
}
renderThreads() {
return this.state.threads.map(thread =>
<ThreadDetail key={thread.thread.id} thread={thread.thread} />
);
}
render() {
return (
<ScrollView style={styles.listStyle}>
{this.renderThreads()}
</ScrollView>
);
}
}
const styles = {
listStyle: {
backgroundColor: 'purple'
}
}
export default TopicList;
export default class TopicList extends Component {
constructor() {
super(props);
this.state = {
threads: []
}
}
componentWillMount() {
.... // same as your code
}
renderItem({index, item}) {
return <ThreadDetail thread={item.thread} />
}
render() {
return <View>
<FlatList
data={this.state.threads}
renderItems={this.renderItem}
keyExtractor={(item, index) => item.thread.id} />
</View>
}
}
note: I haven't tested this