React-native footer within scrollview - react-native

As I wanted to create a footer, I followed the advices saying I had to put a scrollview within a view to make it right.
Well, that's almost perfect but could you help me with one detail ? in the red circle of the picture, we can see that my view is visible. I would like to make the top of it disappear. I tried marginTop: 0 and paddingTop: 0, but it didn't work.
Thanks for any help !
My code for this page :
import React, { Component } from "react";
import { Image, View, ScrollView, Text } from "react-native";
import Button from "react-native-flat-button";
import styles from "../../assets/Styles";
import Footer from "../../Components/Footer/Footer";
import { Header } from "react-native-elements";
import MenuButton from "../../Drawer/MenuButton";
export default class Welcome extends React.Component {
render() {
return (
<View style={styles.footer}>
<Header
rightComponent={<MenuButton navigation={this.props.navigation} />}
centerComponent={{ text: 'Bienvenue au Gavroche', style: {fontFamily: "Parisienne", fontSize: 24, color: '#fff' } }}
containerStyle={{
backgroundColor: "#013243",
justifyContent: "space-around"
}}
statusBarProps={{ barStyle: "light-content" }}
/>
<ScrollView style={styles.containerScroll}>
<View style={styles.container}>
<Image
style={styles.welcomeimg}
source={require("../../assets/Images/facade.png")}
/>
</View>
<View style={styles.buttonView}>
<Button
type="custom"
activeOpacity={0.5}
containerStyle={styles.buttonContainer}
contentStyle={styles.buttonWelcome}
onPress={() => this.props.navigation.navigate("Restaurant")}
>
Restaurant
</Button>
<Button
type="custom"
activeOpacity={0.5}
containerStyle={styles.buttonContainer}
contentStyle={styles.buttonWelcome}
onPress={() => this.props.navigation.navigate("Carte")}
>
Carte
</Button>
</View>
<View style={styles.buttonView}>
<Button
type="custom"
activeOpacity={0.5}
containerStyle={styles.buttonContainer}
contentStyle={styles.buttonWelcome}
onPress={() => this.props.navigation.navigate("Vins")}
>
Vins
</Button>
<Button
type="custom"
onPress={() => this.props.navigation.navigate("Actus")}
activeOpacity={0.5}
containerStyle={styles.buttonContainer}
contentStyle={styles.buttonWelcome}
>
Actus
</Button>
</View>
<View style={styles.buttonView}>
<Button
type="custom"
onPress={() => this.props.navigation.navigate("Reservation")}
activeOpacity={0.5}
containerStyle={styles.buttonContainer}
contentStyle={styles.buttonWelcome}
>
Réservation
</Button>
<Button
type="custom"
onPress={() => this.props.navigation.navigate("Acces")}
containerStyle={styles.buttonContainer}
contentStyle={styles.buttonWelcome}
>
Accès
</Button>
</View>
</ScrollView>
<Footer />
</View>
);
}
}

Related

how to fix RNSVGGroup error in react native expo app?

I'm new to react native and following the tutorial on youtube. After setup sanity for the backend app gave an error. This is the tutorial:- https://youtu.be/AkEnidfZnCU
this is my code:
import { useNavigation } from '#react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';
const HomeScreen = () => {
const navigation = useNavigation();
const [featuredCategories, setFaaturedCategories] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, []);
useEffect(() => {
client.fetch(`
*[_type =="featured"]{
...,
restaurants[]->{
...,
dishes[]->
}
}
`).then(data => {
setFaaturedCategories(data);
});
}, []);
return (
<SafeAreaView className="bg-white pt-5">
{/* Header */}
<View className="flex-row pb-3 items-center mx-4 space-x-2">
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
className="h-7 w-7 bg-gray-300 p-4 rounded-full"
/>
<View className="flex-1">
<Text className="font-bold text-gray-400 text-xs">Deliver Now!</Text>
<Text className="font-bold text-xl">Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View className="flex-row items-center space-x-2 pb-2 mx-4">
<View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
{/* Body */}
<ScrollView className="bg-gray-100" contentContainerStyle={{ paddingBottom: 100 }}>
{/* Categories */}
<Categories />
{/* Featured Rows */}
<FeaturedRow
id="123"
title="Featured"
description="paid placemnts from our partners"
/>
{/* Tasty Discount */}
<FeaturedRow
id="1234"
title="Tasty Discount"
description="Everyone's been enjoying these juicy Discount"
/>
{/* Offers near you */}
<FeaturedRow
id="12345"
title="Offers near you"
description="Why not support your local restaurant tonight!"
/>
</ScrollView>
</SafeAreaView>
);
}
export default HomeScreen;
I have followed all the steps from the video. But it gives me an error.
This is sanity.js file
import sanityClient from '#sanity/client'
import imageUrlBuilder from '#sanity/image-url'
const client = sanityClient({
projectId: "gbg977pk",
dataset: "production",
useCdn: true,
apiVersion: "2021-10-21",
});
const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);
export default client;
This is the error
Please help me to solve this problem.
In React Native, you should use the style attribute to apply CSS styles to your elements, rather than the className attribute.
Consider for example, the line:
<SafeAreaView className="bg-white pt-5">
It should be changed to:
<SafeAreaView style={{ backgroundColor: 'white', paddingTop: 5 }}>
Your code with the changes applied:
import { useNavigation } from '#react-navigation/native';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { View, Text, Image, TextInput, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UserIcon, ChevronDownIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon } from "react-native-heroicons/outline";
import Categories from '../components/Categories';
import FeaturedRow from '../components/FeaturedRow';
import client from '../sanity';
const HomeScreen = () => {
const navigation = useNavigation();
const [featuredCategories, setFaaturedCategories] = useState([]);
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
})
}, []);
useEffect(() => {
client.fetch(`
*[_type =="featured"]{
...,
restaurants[]->{
...,
dishes[]->
}
}
`).then(data => {
setFaaturedCategories(data);
});
}, []);
return (
<SafeAreaView style={{ backgroundColor: 'white', paddingTop: 5 }}>
{/* Header */}
<View style={{ flexDirection: 'row', paddingBottom: 3, marginHorizontal: 4, alignItems: 'center', justifyContent: 'space-between' }}>
<Image
source={{
uri: 'https://links.papareact.com/wru',
}}
style={{ height: 7, width: 7, backgroundColor: 'gray-300', padding: 4, borderRadius: 'full' }}
/>
<View style={{ flex: 1 }}>
<Text style={{ fontWeight: 'bold', color: 'gray-400', fontSize: 'xs' }}>Deliver Now!</Text>
<Text style={{ fontWeight: 'bold', fontSize: 'xl' }}>Current Location
<ChevronDownIcon size={20} color="#00CCBB" />
</Text>
</View>
<UserIcon size={35} color="#00CCBB" />
</View>
{/* Search box */}
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 2, marginHorizontal: 4 }}>
<View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between', backgroundColor: 'gray-200', padding: 3 }}>
<MagnifyingGlassIcon size={20} color="gray" />
<TextInput placeholder='Restaurant and cuisines' keyboardType='default' />
</View>
<AdjustmentsHorizontalIcon color="#00CCBB" />
</View>
{/* Body */}
<ScrollView style={{ backgroundColor: 'gray-100' }} contentContainerStyle={{ paddingBottom: 100 }}>
{/* Categories */}
<Categories />
{/* Featured Rows */}
<FeaturedRow
id="123"
title="Featured"
description="paid placemnts from our partners"
/>
{/* Tasty Discount */}
<FeaturedRow
id="1234"
title="Tasty Discount"
description="Everyone's been enjoying these juicy Discount"
/>
{/* Offers near you */}
<FeaturedRow
id="12345"
title="Offers near you"
description="Why not support your local restaurant tonight!"
/>
</ScrollView>
</SafeAreaView>
);
}
export default HomeScreen;

How to dynamically add Input filed with react hooks state in react native

My goal is to dynamically add or remove the Input field. I initialize one Input field and then once the user taps the plus icon it should add another field below the first initial field.
This is my sample UI:
Here's the actual code in snack actual code
And this is my code so far, with function addTextInput.
import {Block, Text, theme} from "galio-framework";
import React, {useEffect, useState} from "react";
export default function SetupLocations({navigation}) {
const [textInput, setTextInput] = useState([]);
const addTextInput = (index) => {
textInput.push(
<Block row center space="between" style={{marginTop: 20}} key={index}>
<Block center>
<Input
onChangeText={(text) => addValues(text, index)}
style={styles.input} placeholder={'Your city office name'} iconContent={<Block />}
/>
</Block>
<Block right style={{marginLeft: 8}}>
<Ionicons name="remove-circle" size={18} color="#8898aa"/>
</Block>
</Block>
);
}
return (
<Block flex style={{ backgroundColor: "#32325d"}}>
<Block flex>
<ScrollView>
<Block middle style={styles.avatarContainer}>
<Image
source={Images.LoginLogo}
style={styles.avatar}
/>
</Block>
<Block style={[styles.details, {backgroundColor: 'white', marginTop: 40}]}>
<Block row center space="between" style={{marginTop: 20}}>
<Block flex middle center>
<Block row style={{textAlign: 'center'}}>
<Text color="#32325d" bold>
Set up your locations.
</Text>
</Block>
<Block row style={{textAlign: 'center'}}>
<Text color="#36d79a" bold>
You can filter your employee feedback by location.
</Text>
</Block>
</Block>
</Block>
<Block row center space="between" style={{marginTop: 20}}>
<Block center>
<Input style={styles.input} placeholder={'Your city office name'} iconContent={<Block />}/>
</Block>
<Block right style={{marginLeft: 8}}>
<Ionicons name="remove-circle" size={18} color="#8898aa"/>
</Block>
</Block>
{!loading ? (
<Block>
{textInput.map((value) => {
return value
})}
</Block>
) : null}
<Block row center space="between" style={{marginTop: 20}}>
<Block center>
<TouchableOpacity
onPress={ () => addTextInput(textInput.length)}
>
<Ionicons
name="add-circle"
size={18} color="#32325d"
/>
</TouchableOpacity>
</Block>
<Block right style={{marginLeft: 8}}>
<TouchableOpacity
onPress={ () => addTextInput(textInput.length)}
>
<Text muted>Add another location</Text>
</TouchableOpacity>
</Block>
</Block>
<Block flex middle center style={{marginTop: 20, marginBottom: 70}}>
<Block>
<Button color="success" onPress={() => navigation.navigate('CreatePassword')} style={styles.button}>Save my locations</Button>
</Block>
</Block>
</Block>
</ScrollView>
</Block>
</Block>
)
This code creates a new field only when I have some changes in code. However, when tapping the "Add another location" it seems like doesn't trigger but when I console.log I can see that the function successfully triggered.
Here's the actual code in snack actual code
please find the below solution :
Please find expo snack for the same Expo link
Also this is how it looks like
import { View, StyleSheet, TouchableOpacity, ScrollView ,FlatList } from 'react-native';
import Constants from 'expo-constants';
import React, {useEffect, useState} from "react";
import {Block, Input, Text, theme} from "galio-framework";
import Ionicons from "#expo/vector-icons/Ionicons";
export default function App() {
const [textInput, setTextInput] = useState([]);
const [textInputMap,setMapInp] = useState([])
const addTextInput = (index) => {
const newObject = {
index:textInputMap.length,
cityName:`cityName${textInputMap.length}`
}
const alreadyArr = [...textInputMap, newObject]
setMapInp(alreadyArr)
}
const renderEach = ({item,index}) => {
return(
<Block row center space="between" style={{marginTop: 20}} key={item.index}>
<Block center>
<Input
onChangeText={(text) => addValues(text, item.index)}
style={styles.input} placeholder={`your ${item.cityName}`} iconContent={<Block />}
/>
</Block>
<Block right style={{marginLeft: 8}}>
<Ionicons name="remove-circle" size={18} color="#8898aa"/>
</Block>
</Block>
)
}
const addValues = (text, index) => {
let dataArray = this.state.inputData;
let checkBool = false;
if (dataArray.length !== 0){
dataArray.forEach(element => {
if (element.index === index ){
element.text = text;
checkBool = true;
}
});
}
if (checkBool){
setInputData(dataArray)
}
else {
dataArray.push({'text':text,'index':index});
setInputData(dataArray)
}
}
return (
<Block flex style={{ backgroundColor: '#32325d'}}>
<Block flex>
<ScrollView>
<Block style={[styles.details, {backgroundColor: 'white', marginTop: 40}]}>
<Block row center space="between" style={{marginTop: 20}}>
<Block flex middle center>
<Block row style={{textAlign: 'center'}}>
<Text color="#32325d" bold>
Set up your locations.
</Text>
</Block>
<Block row style={{textAlign: 'center'}}>
<Text color="#36d79a" bold>
You can filter your employee feedback by location.
</Text>
</Block>
</Block>
</Block>
<Block row center space="between" style={{marginTop: 20}}>
<Block center>
<Input style={styles.input} placeholder={'Your city office name'} iconContent={<Block />}/>
</Block>
<Block right style={{marginLeft: 8}}>
<Ionicons name="remove-circle" size={18} color="#8898aa"/>
</Block>
</Block>
<Block>
<FlatList
data={textInputMap}
renderItem={renderEach}
/>
{textInput.map((value) => {
return value
})}
</Block>
<Block row center space="between" style={{marginTop: 20}}>
<Block center>
<TouchableOpacity
onPress={ () => addTextInput(textInput.length)}
>
<Ionicons
name="add-circle"
size={18} color="#32325d"
/>
</TouchableOpacity>
</Block>
<Block right style={{marginLeft: 8}}>
<TouchableOpacity
onPress={ () => addTextInput(textInput.length)}
>
<Text muted>Add another location</Text>
</TouchableOpacity>
</Block>
</Block>
</Block>
</ScrollView>
</Block>
</Block>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignContent: "space-between",
justifyContent: "center",
maxWidth: 500,
marginBottom: 10
}
});
Hope it helps , feel free for doubts

Close modal when clicked outside of <Modal> in react native

I am making an application in react native. Here I am able to open Modal at a click and also able to close the modal when clicked inside of the Modal. But I also want to close the Modal when clicked outside of it.
Below is my code:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, TouchableWithoutFeedback, Alert } from 'react-native';
function Main({ navigation }) {
const [modalVisible, setModalVisible] = useState(false);
return (
{/* This is not working */}
<TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}>
<View>
{/* MODAL FOR LANGUAGE */}
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<View>
<Text>Select Language</Text>
</View>
{/* Close modal*/}
<TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
<Text>English</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => { setModalVisible(!modalVisible); }} >
<Text>Hindi</Text>
</TouchableOpacity>
</Modal>
<View>
{/* Open modal*/}
<TouchableOpacity onPress={() => { setModalVisible(true); }} >
<Text>Language</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
);
}
I hope from the comments you can see that I am opening modal when clicked on <Text>Language</Text> , and I am able to close modal when clicked on <Text>English</Text> and <Text>Hindi</Text>, which is inside the modal.
To close the modal when clicked on outside of modal I used <TouchableWithoutFeedback onPress={() => { setModalVisible(!modalVisible); }}> , but this is not working.
NOTE: I have intentionally removed all the styling part so that my code here looks clean and that I can make it clear about what I want.
I believe when modal is visible it covers all the screen and you do not have access to the underlaying components. Did you try to create a backdrop inside modal?
Here's an example:
return (
<View>
{/* MODAL FOR LANGUAGE */}
<View>
{/* Open modal*/}
<TouchableOpacity
onPress={() => {
this.setModalVisible(true);
}}
>
<Text>Language</Text>
</TouchableOpacity>
</View>
<Modal animationType="slide" transparent={true} visible={modalVisible}>
<TouchableOpacity
activeOpacity={0.5}
style={{
height: '100%',
backgroundColor: '#e74655',
opacity: 0.5
}}
onPress={() => {
this.setModalVisible(!modalVisible);
}}
/>
<View
style={{
width: '100%',
height: '80%',
borderWidth: 1,
borderColor: '#000',
position: 'absolute',
bottom: 0,
backgroundColor: '#fff'
}}
>
<View>
<Text>Select Language</Text>
</View>
{/* Close modal*/}
<TouchableOpacity
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text>English</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!modalVisible);
}}
>
<Text>Hindi</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
)
Which produces this result, where the red area is touchable and closes the modal when you press on it

Add space between button

I wanted to add space between button but it's not working below is my code. What do I need to add in my code?
render(){
return (
<View>
<Text>Home</Text>
<Button style={styles.button}
title='Add '
/>
<Button style={styles.button}
title='Search/Update'
/>
</View>
)
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
})
Easiest way is to add a spacing view between your two buttons:
<View>
<Text>Home</Text>
<Button style={styles.button} title='Add' />
<View style={styles.space} /> // <------------------------- right here
<Button style={styles.button} title='Search/Update' />
</View>
const styles = StyleSheet.create({
button: {
marginBottom: 20,
padding: 30
},
space: {
width: 20, // or whatever size you need
height: 20,
},
})
Or you could use like this:
<View>
<View style={{ flex: 1, marginBottom: 10 }}>
<Button title="Add" />
</View>
<View style={{ flex: 1 }}>
<Button title="Search/Update" />
</View>
</View>
You can apply this styling to View component in order to get space between two buttons.
Also import Dimensions from react-native and adjust the width of View according to your need.
import { Dimensions } from 'react-native';
<View style={{
width:Dimensions.get("window").width * 0.5,
display:"flex",
justifyContent:"space-evenly",
alignItems: "center"
}}>
<Text>Home</Text>
<Button
style={styles.button}
title='Add '
/>
<Button
style={styles.button}
title='Search/Update'
/>
</View>
The code <View style={{marginVertical: 10}} You have to use here.
The Button should come inside View Tag
You can use the below code to add space between button
<View style={{marginVertical: 10}}>
<Button title="Button 1" />
</View>
<View style={{marginVertical: 10}}>
<Button title="Button 2" />
</View>

failed to add space between children of view container in react-native

I have a parent view container it contains another view having two button components.I need to have a space between the button components for that I add justify-content into the child view container,but it's not working.
code
import React,{Component} from 'react';
import { View,Image,StyleSheet,Dimensions } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class WelcomePage extends Component {
render() {
const {navigate}=this.props.navigation
return (
<View style={{flexDirection:'column',flex:1,alignItems:'center',justifyContent: 'flex-start'}}>
<Avatar
width={Dimensions.get('window').width}
containerStyle={{flex:85}}
avatarStyle={{flex:85}}
imageProps={{resizeMode:'cover'}}
source={require('../assets/images/logo.png')}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
/>
<View style={{flexDirection:'row',flex:15,marginTop:10,justifyContent:'space-between'}}>
<Button large title='LOGIN' icon={<Icon name="user-secret" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
<Button large title='REGISTER' icon={<Icon name="user-plus" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} onPress={() => navigate('register')} containerViewStyle={{borderRadius:5}} borderRadius={5} />
</View>
</View>
)
}
}
output
using flexbox algorithm how can I add space in between the button components?
You need to remove the style alignItems:'center' from the parent wrapper.
Since alignItems: 'center' aligns your child elements to the center, then you can't see the effect of justifyContent: 'space-between'
Therefore modify your code as follows
<View style={{flexDirection:'column',flex:1,justifyContent: 'flex-start'}}> // Remove alignItems here
<Avatar
width={Dimensions.get('window').width}
containerStyle={{flex:85}}
avatarStyle={{flex:85}}
imageProps={{resizeMode:'cover'}}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
/>
<View style={{flexDirection:'row',flex:15,marginTop:10,justifyContent:'space-between', paddingLeft: 20, paddingRight: 20}}> // Added some padding for a bettwer view
<Button large title='LOGIN' icon={<Icon name="user-secret" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
<Button large title='REGISTER' icon={<Icon name="user-plus" size={25} color="white" />} buttonStyle={{height:50,width:130,backgroundColor:"#b3b3b3"}} titleStyle={{fontWeight:"700"}} onPress={() =>{}} containerViewStyle={{borderRadius:5}} borderRadius={5} />
</View>
</View>