Posts

Showing posts from 2020

Bottom popup in react-native for image change

Image
     Full Source Code     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.iBgM

Add values in array using React-native

Image
1. Below Are The Lines Of Source Code Of React-Native import { StyleSheet, Text, View, Alert, TouchableOpacity, ScrollView, Platform, TextInput } from 'react-native'; import React, { Component } from 'react'; class Practice extends React.Component {     constructor(props) {         super(props);         this.collection = [             { carBrand: 'suzuki', carName: 'Baleno' },             { carBrand: 'tata', carName: 'Nexon' }         ],             this.arr = [];         this.state = {             name: '',             forAdd: []         }     }     addfn() {                  this.arr.push(String(this.state.name))         this.setState({             forAdd: this.arr         })     }     render() {                  return (             <View style={styles.MainContainer}>                 {                     this.collection.map((item, key) => (                         <View style={{ justifyContent: 'space-around

Change of the image using touchable opacity in react-native

Image
  1. Below Are The Lines Of Source Code Of React-Native import React, { Component, useState } from 'react'; import {   SafeAreaView,   StyleSheet,   ScrollView,   View,   Alert,   Modal,   Text,   StatusBar,   TouchableOpacity,   TouchableHighlight,   TextInput, FlatList, Button, Image } from 'react-native'; class App extends React.Component {   constructor(props) {     super(props);     this.state = {       isBlack: true,       isBlue: false,     }   }   handleChange = (bool) => {     if (bool)       this.setState({ isBlack: true, isBlue: false })     else       this.setState({ isBlack: false, isBlue: true })   }   render() {     const { isBlack, isBlue } = this.state;     return (       <View style={styles.container}>         <Image           style={{ height: 400, width: "100%" }}           resizeMode="contain"           source={{             uri: isBlack ? 'https://th.bing.com/th/id/OIP.m4sB6cgi6FFzN-XqiT0MlgHaE6?w=240&h=180&am