Monday, July 4, 2022
HomeiOS Developmentandroid - react native backside sheet integrating into residence display screen

android – react native backside sheet integrating into residence display screen


I’m following the beneath tutorial and making an attempt to implement the react native backside sheet in my House Display screen.
I used all his codes however nonetheless I’m not in a position to open the underside sheet after I click on the filters button
Offering the video tutorial, GitHub hyperlink and my code beneath beneath
Its throwing an error at this line —> bs = React.createRef();
Are you able to let me know easy methods to repair it

https://www.youtube.com/watch?v=mjJzaiGkaQA

https://github.com/itzpradip/Meals-Finder-React-Native-App/blob/grasp/screens/EditProfileScreen.js

import 'react-native-gesture-handler';
import React, {useRef, useState} from 'react';
//import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import MapView from 'react-native-map-clustering';
import Autocomplete from 'react-native-autocomplete-input';
import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

//import {Button} from 'react-native';
import {
  Picture,
  LogBox,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Textual content,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {Button, Menu, Supplier} from 'react-native-paper';
import DropDownPicker from 'react-native-dropdown-picker';
//import { Enter } from 'react-native-elements';
//import Geolocation from 'react-native-geolocation-service';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';

LogBox.ignoreAllLogs();
const Drawer = createDrawerNavigator();

const Stack = createNativeStackNavigator();

const knowledge = ['dropdown1', 'drop down 2', 'a drop down'];

const AuthStack = () => {
  return (
    <Drawer.Navigator>
      <Stack.Display screen identify="HomeScreen" element={HomeScreen} />
      <Stack.Display screen identify="HomeScreen2" element={HomeScreen2} />
      {/* <Stack.Display screen identify="HomeScreen7" element={HomeScreen7}/>
            <Stack.Display screen identify="HomeScreen8" element={HomeScreen8}/> */}
    </Drawer.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Display screen
          identify="Fundamental"
          element={Fundamental}
          choices={{headerShown: false}}
        />
        <Stack.Display screen identify="AuthStack">{() => <AuthStack />}</Stack.Display screen>

        {/* <AuthStack /> */}
        {/* <Stack.Display screen identify="OnboardingScreen" element={OnboardingScreen} /> */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const Fundamental = ({navigation}) => {
  return (
    <SafeAreaView
      fashion={{
        flex: 1,
        justifyContent: 'middle',
        alignItems: 'middle',
        backgroundColor: '#fff',
      }}>
      <View fashion={{}}>
        <Textual content fashion={{fontSize: 30, fontWeight: 'daring', colour: '#20315f'}}>
          GAMEON
        </Textual content>
      </View>

      <TouchableOpacity
        onPress={() => navigation.navigate('AuthStack')}
        fashion={{
          backgroundColor: '#AD40AF',
          padding: 20,
          flexDirection: 'row',
          justifyContent: 'space-between',
          colour: '#fff',
          width: '90%',
          marginBottom: 50,
        }}>
        <Textual content
          fashion={{
            colour: '#fff',
            fontWeight: 'daring',
          }}>
          Let's Start
        </Textual content>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const House = () => {
  return (
    <View
      fashion={{
        flex: 1,
        justifyContent: 'middle',
        alignItems: 'middle',
        backgroundColor: '#fff',
      }}>
      <Textual content fashion={{fontSize: 30, fontWeight: 'daring', colour: '#20315f'}}>
        House
      </Textual content>
    </View>
  );
};

const HomeScreen2 = () => {
  return (
    <View fashion={kinds.container}>
      <MapView
        // supplier={PROVIDER_GOOGLE}
        // take away if not utilizing Google Maps
        fashion={kinds.map}
        area={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}></MapView>

      {/* <View fashion={kinds.searchBox}>
        <TextInput
          placeholder="Search right here"
          placeholderTextColor="#000"
          autoCapitalize="none"
          fashion={{flex: 1, padding: 0}}
        />
      </View> */}

      <View fashion={kinds.searchBox}>
        <Autocomplete

        //onChangeText={}
        />
      </View>
    </View>
  );
};

const HomeScreen = ({navigation}) => {
  bs = React.createRef();
  fall = new Animated.Worth(1);

  // renderInner = () => (
  //     <View fashion={kinds.panel}>
  //       <View fashion={{alignItems: 'middle'}}>
  //         <Textual content fashion={kinds.panelTitle}>Add Picture</Textual content>
  //         <Textual content fashion={kinds.panelSubtitle}>Select Your Profile Image</Textual content>
  //       </View>
  //       <TouchableOpacity fashion={kinds.panelButton} onPress={takePhotoFromCamera}>
  //         <Textual content fashion={kinds.panelButtonTitle}>Take Picture</Textual content>
  //       </TouchableOpacity>
  //       <TouchableOpacity fashion={kinds.panelButton} onPress={choosePhotoFromLibrary}>
  //         <Textual content fashion={kinds.panelButtonTitle}>Select From Library</Textual content>
  //       </TouchableOpacity>
  //       <TouchableOpacity
  //         fashion={kinds.panelButton}
  //         onPress={() => this.bs.present.snapTo(1)}>
  //         <Textual content fashion={kinds.panelButtonTitle}>Cancel</Textual content>
  //       </TouchableOpacity>
  //     </View>
  //   );

  //   renderHeader = () => (
  //     <View fashion={kinds.header}>
  //       <View fashion={kinds.panelHeader}>
  //         <View fashion={kinds.panelHandle} />
  //       </View>
  //     </View>
  //   );

  return (
    <SafeAreaView
      fashion={{
        flex: 1,
        backgroundColor: '#fff',
      }}>
      <View
        fashion={{
          flex: 0.4,
          zIndex: 100,
          elevation: 1000,
        }}>
        <ScrollView
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          contentContainerStyle={{
            alignItems: 'middle',
            flexDirection: 'row',
          }}>
          <View
            fashion={{
              margin: 10,
              flex: 1,
              zIndex: 100,
            }}>
            <TouchableOpacity onPress={() => this.bs.present.snapTo(0)}>
              <Textual content>filters</Textual content>
            </TouchableOpacity>

            {/* <BottomSheet
                                ref={this.bs}
                                snapPoints={[330, 0]}
                                renderContent={this.renderInner}
                                renderHeader={this.renderHeader}
                                initialSnap={1}
                                callbackNode={this.fall}
                                enabledGestureInteraction={true}
                            /> */}
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const kinds = StyleSheet.create({
  container: {
    //  ...StyleSheet.absoluteFillObject,

    //  justifyContent: 'flex-end',
    //  alignItems: 'middle',
    flex: 1,
  },

  searchBox: {
    place: 'absolute',
    left: 150,
    marginTop: Platform.OS === 'ios' ? 8 : 4,
    // flexDirection: 'row',
    backgroundColor: '#fff',
    width: '60%',
    alignSelf: 'middle',
    borderRadius: 5,
    //padding: 5,
    //shadowColor: '#ccc',
    top: '4%',
    // marginLeft: 249,
    shadowOffset: {width: 0, top: 3},
    //shadowOpacity: 0.5,
    // shadowRadius: 5,
    //elevation: 10,
  },

  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  spotlight: {
    fontWeight: '700',
  },

  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments