I'm trying to create a modal, which has 2 parts: ScrollView and TouchableOpacity.
So i used react-native-modal and my app.js:
import React, { Component } from "react";
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View
} from "react-native";
import Modal from "react-native-modal";
export default class Example extends Component {
state = {
isModalVisible: false
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => this.setState({ isModalVisible: true })}
>
<View style={styles.button}>
<Text>Open It!</Text>
</View>
</TouchableOpacity>
<Modal
isVisible={this.state.isModalVisible}
onBackButtonPress={() => this.setState({ isModalVisible: false })}
>
<View style={styles.modalContent}>
<View style={{ flex: 9 }}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flex: 3, backgroundColor: "red" }}>
<Text>A</Text>
</View>
<View style={{ flex: 2, backgroundColor: "yellow" }}>
<Text>B</Text>
</View>
<View style={{ flex: 1, backgroundColor: "green" }}>
<Text>C</Text>
</View>
<View style={{ flex: 1, backgroundColor: "blue" }}>
<Text>D</Text>
</View>
<View style={{ flex: 1, backgroundColor: "cyan" }}>
<Text>E</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>F</Text>
</View>
</ScrollView>
</View>
<View style={{ flex: 1 }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.setState({ isModalVisible: false })}
>
<Text>Add Package</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
button: {
backgroundColor: "lightblue",
padding: 12,
margin: 16,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)"
},
modalContent: {
flex: 1,
backgroundColor: "white",
padding: 22,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)"
}
});
But now it's unscrollable! I tried to remove the flexGrow: 1 but then the child's flex: x lose its effect!
Please consider that I DON'T WANT to use height and width!
Any idea?
Thanks in advance!
Related
How can i style to make both the buttons at the bottom of the screen and make a little gap between them and how can i make my profile image at the top of the screen and text below it like this image https://www.figma.com/file/BGDDg26x9Cl5AAOA2GGg52/Untitled?t=JCVgnCTjHVkRyhPX-0
i tried to style but something than the profile image and text gets hidden
import { StyleSheet, Text, View, Image } from 'react-native'
const App = () => {
return (
<View style={styles.container}>
<View style={styles.userSection}>
<View style={styles.imageContainer}>
<Image
style={styles.image}
source={('./img.jpg')
resizeMode="contain"
overflow="hidden"
/>
</View>
<Text style={styles.text}}>Text</Text>
</View>
})
}
<View style={styles.interacte}>
<Text style={formbtn}>Button 1</Text>
<Text style={formbtn}>Button 2</Text>
</View>
</View>
)
}
export default App
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
userSection: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 80
},
imageContainer: {
width: 150,
height: 150,
borderRadius: 80,
overflow: 'hidden',
marginRight: -160,
marginTop: -600
},
image: {
width: '100%',
height: '100%',
},
text: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
marginTop: -350,
},
interacte: {
marginTop: 500,
position: absolute,
}
});
App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
const App = () => {
return (
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<View style={{ marginTop: 10, marginBottom: 30 }}>
<Image
style={{ width: 100, height: 100, borderRadius: 20 }}
source={{
uri: 'https://cdn-icons-png.flaticon.com/128/919/919851.png',
}}
/>
</View>
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Welcome to world</Text>
<View style={{ marginTop: 300 }}>
<TouchableOpacity
style={{
width: 200,
height: 50,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
Sing In
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
width: 200,
height: 50,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
Sing Up
</Text>
</TouchableOpacity>
</View>
</View>
);
};
export default App;
output
Hope this will help you!!🐼
I'm making a system in which there is one horizontal ScrollView. But I don't know why, this scrollView doesn't work.
There is my code:
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
display: "flex",
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
display: "flex",
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
I tried to remove and change some things but nothing change.
Could someone explain to me where the problem is?
Thanks you in advance I continue by my side!
You need to add a flex: 1 to the parent view of your elements. The following adjustment fixes your issue.
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
flex: 1,
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
I want to add a clock to my component right-bottom here is my code :
import React from "react";
import { StyleSheet, View, Image, Text } from "react-native";
import CircleCard from "./CircleCard";
import { MaterialIcons } from "#expo/vector-icons";
export default function ChatCard() {
return (
<View style={styles.container}>
<View>
<CircleCard />{// my component}
</View>
<View
style={{
flexDirection: "row",
flex: 1,
flexWrap: "wrap",
flexShrink: 1,
}}
>
<Text style={{ color: "gray" }} numberOfLines={1}>{//For parsing }
SomeRandomLettersSomeRandomLettersSomeRandomLettersSomeRandomLetters {//The message part}
</Text>
<Text style={{ position: "absolute", bottom: 0, right: 0 }}>18:48</Text> {//The clock bottom right}
</View>
<View style={{ margin: 15 }}> {//For Icon}
<MaterialIcons
name="keyboard-arrow-right"
size={40}
color="black"
style={{ width: 30 }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: "100%",
height: 80,
margin: 5,
flexDirection: "row",
flexWrap: "wrap",
borderColor: "gray",
borderWidth: 1,
borderRadius: 20,
justifyContent: "space-between",
},
});
i added it at the end but now the First and Second Text overlaped.
Also an image for my goal:
Note2 : I read that the position absolute violate the flex-box but i do not find any style for moving the Text component to end. If there is an other way. i will be glad.
I don't know if it is what you want actually but here is my solution:
import React from "react";
import { StyleSheet, View, Image, Text, Dimensions } from "react-native";
import { MaterialIcons } from "#expo/vector-icons";
export default function ChatCard() {
return (
<View style={styles.container}>
<View style={styles.image}>
<Text style={{ fontSize: 34 }}>B</Text>
</View>
<View
style={styles.rowContent}
>
<Text style={styles.longText} ellipsizeMode='tail' numberOfLines={1}>
SomeRandomLettersSomeRandomLettersSomeRandomLettersSomeRandomLetters
</Text>
<Text style={styles.time}>18:48</Text>
</View>
<View style={{ margin: 15 }}>
<MaterialIcons
name="keyboard-arrow-right"
size={40}
color="black"
style={{ width: 30 }}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginTop: 30,
width: '100%',
height: 80,
margin: 5,
flexDirection: "row",
borderColor: "gray",
borderWidth: 1,
borderRadius: 20,
},
image: {
alignItems: 'center',
justifyContent: "center",
width: 70,
padding: 10,
},
rowContent: {
justifyContent: "center",
alignItems: "center",
flexDirection: 'column',
flex: 1
},
longText: {
color: "gray",
alignSelf: 'stretch',
justifyContent: 'center'
},
time: { alignSelf: 'flex-end' }
});
I am trying to make an Action Button on the tapbar which deploys multiple items using Modal. The issue I have is that I want the action button to stay visible so the user can toggle between the modal.
Here you can see the action button visible
obviously disappears once the modal is activated.
Tried:
On the modal make another button, but on different device sizes the button moves.
Code
import React, {useState} from 'react';
import {
Dimensions,
Platform,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';
const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
: console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);
Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();
const TabBarAdvancedButton = ({bgColor, ...props}) => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<View style={styles.container} pointerEvents="box-none">
<TabBg color={'white'} style={styles.background} />
<TouchableOpacity
style={styles.button}
onPress={props.onPress}
activeOpacity={0.9}
onPress={() => setModalVisible(true)}>
<Entypo name="plus" style={styles.buttonIcon} />
</TouchableOpacity>
</View>
<Modal
backdropOpacity={0.8}
animationIn="fadeIn"
animationOut="fadeOut"
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}>
{/*close button */}
<View style={styles.content}>
<TouchableOpacity
style={{
position: 'absolute',
backgroundColor: 'red',
alignSelf: 'center',
}}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
marginBottom: height * 0.02,
}}>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
};
export default TabBarAdvancedButton;
const styles = StyleSheet.create({
container: {
position: 'relative',
width: 75,
alignItems: 'center',
},
background: {
position: 'absolute',
top: 0,
},
button: {
top: -22.5,
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 27,
backgroundColor: colors.PRIMARY_COLOR_DARK,
},
buttonIcon: {
fontSize: 16,
color: '#F6F7EB',
},
content: {
backgroundColor: 'transparent',
padding: 60,
justifyContent: 'space-evenly',
alignItems: 'center',
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: 'row',
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: 'flex-end',
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: '#468CFF',
borderWidth: 3.5,
backgroundColor: '#366ABF',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
},
});
You can try the below code, you should be adding the action button inside the modal as well, so that will be displayed inside modal.
export default ActionButton = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
<View style={styles.container}>
<Modal
backdropOpacity={0.8}
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
style={styles.contentView}
>
{/*close button */}
<View style={styles.content}>
<View
style={{
flexDirection: "row",
flex: 1,
justifyContent: "space-around",
}}
>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.8}
style={[styles.buttonItem, { bottom: 130 }]}
>
<MaterialIcons name="fitness-center" size={20} color="#fff" />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
<AntDesign name="search1" size={20} color="#fff" />
</TouchableOpacity>
<Button
onPress={() => {
setModalVisible(true);
}}
buttonStyle={styles.buttonStyle}
icon={
<Entypo
name={"plus"}
fill={Colors.tintColor}
color={Colors.iconColor}
/>
}
/>
</View>
</View>
</Modal>
</View>
</>
);
};
const styles = StyleSheet.create({
content: {
backgroundColor: "transparent",
padding: 60,
justifyContent: "space-evenly",
alignItems: "center",
borderTopRightRadius: 17,
borderTopLeftRadius: 17,
flexDirection: "row",
},
contentTitle: {
fontSize: 20,
marginBottom: 12,
},
contentView: {
justifyContent: "flex-end",
margin: 0,
},
buttonStyle: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonStyle2: {
height: 50,
width: 50,
backgroundColor: Colors.tintColor,
borderRadius: 100,
},
buttonItem: {
height: 56,
width: 56,
borderRadius: 100,
borderColor: "#468CFF",
borderWidth: 3.5,
backgroundColor: "#366ABF",
bottom: 50,
justifyContent: "center",
alignItems: "center",
},
});
I have a modal Component that I am trying to put in the center of the screen.
In my view tag with style={styles.containerStyle} the way it currently is written the modal is vertically in the middle but horizontally to the left. If I add flexDirection: 'row' to the containerStyle it moves it to the middle horizontally but to the top vertically.
This is my modal component:
class ItemInformationModal extends Component {
onNotesChange(text) {
this.props.notesChanged(text);
}
render() {
return (
<Modal
transparent
animationType='fade'
visible={this.props.itemModalVisible}
>
<View style={styles.containerStyle}>
<View style={styles.modalContainer}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styles.itemTitle}>{this.props.currItem.text}</Text>
<View style={{ padding: 5 }}>
<DatePickerIOS />
</View>
</View>
<View style={{ padding: 5 }}>
<Feather
name="x-square"
size={35}
color={'#db5461'}
onPress={() => this.props.closeItemModal()}
/>
</View>
</View>
<View style={{ padding: 5 }}>
<TextInput
placeholder={'Add notes'}
value={this.props.currItem.notes}
multiline
style={styles.notesInput}
onChangeText={this.onNotesChange.bind(this)}
/>
</View>
</View>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
alignSelf: 'baseline',
},
notesInput: {
height: 130,
borderWidth: 1,
borderRadius: 10,
borderColor: '#28313b',
padding: 10,
color: '#28313b'
},
itemTitle: {
fontSize: 20,
color: '#28313b',
padding: 10
}
});
You can remove alignSelf
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems:"center"
},
modalContainer: {
width: '75%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#cdd2c9',
backgroundColor: '#cdd2c9',
}