CODEWITHSUNDEEP
node.jsreactjsreact-native
bli00
bli00

Reputation: 2787

Few newbie react-native questions

I'm new to react and react-native (and pretty much everything in general...), I'm trying to follow facebook's tutorial on state and props. I'm playing around with the code and I ran into some issues.

I've modified my Apps.js to look like this: 

import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text1 : this.props.text2;
    let pic = this.state.showText ? {uri: this.props.url1} : {uri: this.props.url2}
    return (
      <View>
        <Image source={pic} style={{width: 193, height: 110}}/>
        <Text>{display}</Text>
      </View>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Blink text1='test1' />
        <Blink text2='test2' />
        <Blink url1='https://www.gizbot.com/img/2015/08/10-1439192289-lolemoji.jpg' />
        <Blink url2='http://s3.india.com/wp-content/uploads/2015/08/haha-nelson-simpsons.jpg' />
      </View>
    );
  }
}

Instead of blinking three lines of text like the one in the tutorial, it's suppose to blink two different images with two different lines of text (text1 and text2) using my own StyleSheet. The issue I'm running into is that they are not properly aligned. I can't get them to center no matter what I try.

The two different images it displays/blinks are here and here

What I want them to look like are here and here

So my questions are:

1) Does it matter where I define style? e.g. in my code, I've included them inside the second render, but I've noticed that if I put them inside the first render, different results occur. What is the difference?

2) Am I using props incorrectly here? What should I be doing instead to define the two images and texts as part of my props?

3) Are setInterval and previousState native react libraries? How are they being called? i.e. what's triggering setInterval to change the value of showText?

4) when is setState being called?

Upvotes: 0

Views: 127

Answers (1)

Harlan
Harlan

Reputation: 847

I rewrite your code, and I think it works as your expect now.

to your questions:

1&2: the way you use style and props is wrong, see my code below.

3: setInterval is native react libraries, you can find the usage in https://facebook.github.io/react-native/docs/timers.html

4: setState is called by your code, please look at the document https://facebook.github.io/react-native/docs/state.html

import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

class Blink extends Component {
  render() {
    const { text, url } = this.props;
    console.log('url' + url);
    return (
      <View>
        <Image source={{uri:url, cache: 'force-cache'}} style={{width: 193, height: 110}}/>
        <Text>{text}</Text>
      </View>
    );
  }
}

export default class BlinkApp extends Component {
  constructor(props) {
    super(props);


    this.state = {
      showFirst: true,
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        showFirst: !this.state.showFirst
      });
    }, 1000);
  }

  render() {
    const showFirst = this.state.showFirst;
    return (
      <View style={styles.container}>
        {showFirst && <Blink url="https://www.gizbot.com/img/2015/08/10-1439192289-lolemoji.jpg" text='test1' />}
        {!showFirst && <Blink url="http://s3.india.com/wp-content/uploads/2015/08/haha-nelson-simpsons.jpg" text='test2' />}
      </View>
    );
  }
}

Upvotes: 1

Related Questions