CODEWITHSUNDEEP
react-native
Sukhpreet Pabla
Sukhpreet Pabla

Reputation: 39

Adding a View By Clicking a Button- REACT NATIVE

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?

Upvotes: 0

Views: 5871

Answers (3)

Muhammad Jahanzeb
Muhammad Jahanzeb

Reputation: 85

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 >
)

}

Upvotes: 0

Moji Izadmehr
Moji Izadmehr

Reputation: 2524

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>
         );
      }
}

Upvotes: 1

Walter Shub
Walter Shub

Reputation: 662

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

Upvotes: 2

Related Questions