Bottom popup in react-native for image change
- App.js File
import React, { Component } from 'react';
import { StyleSheet, View, Image } 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: 400, width: "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((item, index) => {
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: 2, justifyContent: '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.jsimport React from 'react';import {StyleSheet,View,TouchableOpacity,Image, Modal} 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 }}><ModalbackdropColor={'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: 0, height: 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`flex: 1;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
Post a Comment