React Native code explanation

Question

I have a simple app application project that I would appreciate if someone would explain the logic behind the code.

On the click on the button the text that is inside the text input appears on the imageBackground.

FilterView.js:

import React, { Component } from 'react';
import { 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    Button, Platform, TouchableOpacity, TextInput, ImageBackground } from 'react-native';
import { captureRef } from "react-native-view-shot";
import { Input } from 'react-native-elements';
import DynamicText from './DynamicText';

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

        this.state = {
            text: '',
            imageURI: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg',
        }
    }

    captureScreenFunction = () => {
        captureRef({
            format: "jpg",
            quality: 0.8
        })
        .then(
            uri => this.setState({ imageURI: uri }),
            error => console.error("Oops, Something Went Wrong", error)
        );
    }

    onTextReceived = (text) => {
        this.setState({text});
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Button title="Capture Device Screenshot" onPress={this.captureScreenFunction} />
                <ImageBackground source={{uri: this.state.imageURI}} style={{ 
                    width: 200, 
                    height: 300, 
                    marginTop: 5, 
                    alignItems: 'center', 
                    justifyContent: 'center'
                }}>
                    <Text style={{color: 'white'}}>{this.state.text}</Text>
                </ImageBackground>
                <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                    <View>
                        <DynamicText onChangeText={this.onTextReceived}/>
                    </View>
                </View>
            </View>
        );
    }
}

DynamicText.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button, Platform, TouchableOpacity, TextInput, ImageBackground } from 'react-native';

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

        this.state = {
            text: '',
            mode: 1 // 1 = edit, 2 = view
        }
    }

    onChange = (text) => {
        this.setState({text});
        this.props.onChangeText(text);
    }

    render() {
        return (
            <View ref="dymanicView">
                <TextInput
                    ref="newItemText"
                    style={{ height: 40 }}
                    placeholder="Type something..."
                    onChangeText={(text) => this.onChange(text)}
                />
            </View>
        )
    }
}

DynamicText.defaultProps = {
    onChangeText: () => {}
}

I would like to understand about the defaultProps. For instance what does it do and when can I use it. Also please explain step by step the order of defining and transferring data between the components.

Sorry! SO is not a platform for all this tutorials. Please ask some relevant questions. — Akshay Rao, May 10 '18 at 10:50

Riddhi · Answer 1 · 2018-05-10T10:53:30.463

First of all, stackoverflow is not a platform for this type of question. You have to understand first by yourself and then still you have any doubt then put it with code. Anyways I'll explain how it will call when you run your project.

step-1: first of all FilterView.js is loaded then load everything which you wrote in import tag and in render function.

step-2 then this.state is mutable. This means that state can be updated in the future while props can't. we can initialize state in the constructor, and then call setState when we want to change it.

step-3 then render method call which display what you want/write.

step-4 then captureScreenFunction is a function which you have to call onPress event of Button and onTextReceived is also a function which is call on onTextChange method. function can bind in different ways but here captureScreenFunction is bind like this captureScreenFunction = () => {} or you can bind like this this.captureScreenFunction = this.captureScreenFunction.bind(this);

step-4 DynamicText.js file get data using this.props which is write in this file. In this file onChange = (text) => {} which calls onChangeText() function which is wrote inside FilterView.js using this.props.

and at last for default.props I'm giving you a link please refer this. defaultProps in React Native?

Hope it will help you.

React Native code explanation

1 Answers1