Bottom popup in react-native for image change

 





   Full Source Code

  •     App.js File

import React, { Component } from 'react';
import { StyleSheetViewImage } from 'react-native';
import TouchablePureComp from '../common/touchablePureComp';
import ModelComponent from '../common/modelSliderComponent';

export default class BottomSliderForColor extends React.Component {
    constructor() {
        super();
        this.state = {
            isVisible: false,
            data: [
                { name: "Redmi"colorName: "Green"color: "#009933"isActive: true, image: "https://www.bing.com/th?id=OIP.nCJf2ygszbStDfPlJuvX4AHaFj&w=120&h=96&c=8&rs=1&qlt=90&pid=3.1&rm=2" },
                { name: "Samsung"colorName: "Pink"color: "#ff1aff"isActive: false,  image: "https://th.bing.com/th/id/OIP.iBgMA7_ZtDtgJtnJ6L5CMgHaFj?w=249&h=188&c=7&o=5&pid=1.7" },
                { name: "Oppo"colorName: "Blue"color: "#0000ff"isActive: false,  image: "https://th.bing.com/th/id/OIP.F2ltfzP_4yei7cP4uzNUdgHaFj?w=224&h=180&c=7&o=5&pid=1.7" },
            ]
        }
    }
    handleChange = (name=> {
        this.setState({
            data: this.state.data.map(item => {
                if (name == item.name) {+
                else {
                    item.isActive = false;
                }
                return item
            })
        })
    }
    onClose = () => this.setState({ isVisible: !this.state.isVisible });
    render() {
        let imagePath =  "https://www.bing.com/th?id=OIP.nCJf2ygszbStDfPlJuvX4AHaFj&w=120&h=96&c=8&rs=1&qlt=90&pid=3.1&rm=2";
        this.state.data.map(item => {
            if (item.isActive) {
                imagePath = item.image
            }
        })
        return (
            <View style={styles.container}>
                    <Image
                        style={height: 400width: "100%", }}
                        resizeMode="contain"
                        source={{
                            uri: imagePath
                        }}
                    />
                <ModelComponent
                    isVisible={this.state.isVisible}
                    isTextInput={false}
                    array={true}
                    forTouchable={() =>  { this.setState({ isVisible: !this.state.isVisible }) }}
                    data={this.state.data}
                >
                    {
                        this.state.data.map((itemindex=> {
                            return <TouchablePureComp
                                backgroundColor={item.isActive ? item.color : "grey"}
                                padding={20}
                                fontSize={20}
                                color={'#fff'}
                                key={index}
                                name={item.colorName}
                                forTouchable={() => { this.handleChange(item.name) }}
                            />
                        })
                    }
                </ModelComponent>
                <View style={flex: 2justifyContent: 'center' }}>
                    <TouchablePureComp
                        height={50}
                        width={200}
                        backgroundColor={'#7575a3'}
                        borderRadius={10}
                        fontSize={25}
                        color={'#fff'}
                        name={'Select Color'}
                        forTouchable={() => { this.setState({ isVisible: true }) }}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#ecf0f1',
    },
    text: {
        color: '#3f2949',
        marginTop: 10
    },
  
});


  • You just need to create the two(js) file "TouchablePureComp" and " ModelComponent" paste the code in to it.

    ModelComponent.js

    import React from 'react';
    import {
        StyleSheet,
        View,
        TouchableOpacity,
        ImageModal
    from 'react-native';
    import styled from 'styled-components';
    import * as Animatable from 'react-native-animatable';

    export default class ModelComponent extends React.PureComponent {

        constructor(props) {
            super(props);
            this.state = {
                overlayAnimationType: 'fadeInUp',
                animationOutType: 'fadeInDown'
            }
        }
        render() {
            return (
                <View style={flex: 1 }}>
                    <Modal
                        backdropColor={'green'}
                        backdropOpacity={1}
                        animationType={"none"}
                        transparent={true}
                        visible={this.props.isVisible}
                        onRequestClose={() => {
                            Alert.alert("Modal has been closed.");  setTimeout(function () {
                                console.log('after 5 sec')
                            }, 100);
                        }}>
                        <Animatable.View animation={this.state.overlayAnimationType}  duration={500} easing={'ease'}
                            useNativeDriver style={styles.container}>
                            {/*All views of Modal*/}
                            <InnerViewOfModel style={{
                                shadowColor: '#000000',
                                shadowOffset: { width: 0height: 2 },
                                shadowOpacity: 0.9,
                                shadowRadius: 3,
                            }}>
                                <View style={alignSelf: 'flex-end'padding: 15 }}>
                                    
                                    <TouchableOpacity onPress={() => { this.props.forTouchable() }} >
                                        <View>
                                            <Image source={require('../images/icon.png')} />
                                        </View>
                                    </TouchableOpacity>
                                </View>
                                <View style={styles.modal}>
                                    <View style={flexDirection: 'row',  justifyContent: 'space-around'width: '100%' }}>
                                        {this.props.children}
                                    </View>
                                </View>
                            </InnerViewOfModel>
                        </Animatable.View>
                    </Modal >
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        modal: {
            alignContent: 'space-around',
            justifyContent: 'center',
            backgroundColor: '#fff',
            alignItems: 'center',
            height: 200,
            width: '100%',
            borderWidth: 1,
            borderColor: '#fff',
            shadowOffset: {
                width: 100,
                height: 200
            },
            shadowOpacity: 0.75,
            shadowRadius: 3.84,
            elevation: 5
        },
        container: {
            flex: 2,
            justifyContent: 'center',
            backgroundColor: 'rgba(30,30,30, 0.78)',
            
        }
    });

    const InnerViewOfModel = styled.View`
                flex1;
                justify-content:flex-end;
                align-items:flex-end;
                margin-top:22px;
               
    `


   TouchablePureComp.js


import React from 'react';
import {
    View,
    Text,
    TouchableOpacity
from 'react-native';

export default class TouchablePureComp extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
            <View>
                <TouchableOpacity style={{
                    height: this.props.height,
                    width: this.props.width,
                    padding: this.props.padding,
                    backgroundColor: this.props.backgroundColor,
                    borderRadius: this.props.borderRadius,
                    justifyContent: 'center'alignItems: 'center'
                }}
                
                    onPress={() => { this.props.forTouchable() }}>
                    <Text
                        style={{
                            fontSize: this.props.fontSize,
                            fontWeight: this.props.fontWeight,
                            letterSpacing: 0.5,
                            color: this.props.color
                        }}>{this.props.name}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


   You need to install these packages:

npm install react-native-animatable --save

npm install react-native-styled-components --save

Comments

Popular posts from this blog

program that compresses windows BMP image file using java