Is there any conflict with native base and react-native-modal? I can't get my modal to display the content. I was wondering if it is because the Container tag of native base.
Code: https://snack.expo.io/rJbAI_Cxr
I've had the same issue. just remove the flex:1 from Modal style and you will end up with centered modal without any style. Then you need to set all the styles for the modal by yourself.
You can use Modal from react native component also ,no need to use third party library.
import {Modal} from 'react-native';
constructor(props) {
super(props);
this.state = {
modalVisibility: false,
};
ShowModalFunction(visible) {
this.setState({ modalVisibility: visible });
}
<Modal
transparent={true}
animationType={"slide"}
visible={this.state.modalVisibility}
onRequestClose={() => { this.ShowModalFunction(!this.state.modalVisibility) }} >
<View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
<View style={styles.ModalInsideView}>
<Text style={{color:'white',fontSize:14,fontWeight:'700'}}>Hello </Text>
</View>
</View>
</Modal>
const styles = StyleSheet.create({
ModalInsideView:{
justifyContent: 'center',
alignItems: 'center',
backgroundColor : "#00BCD4",
height: 245 ,
width: '90%',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
});
Try this if you face issue in this ,let me know.
Related
I am trying to acheive a styling as shown in the image attached below
See how here the fingerprint icon happens to be inside the border of the Textinput field but instead I am getting the output as shown below
PS:- ignore the left and right side black color borders it happens to be the simulator body just focus on the UI.
Here's my code :-
import { View, Text, TextInput, StyleSheet } from 'react-native'
import React from 'react'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
const TestAtom = () => {
return (
<View style={styles.searchSection}>
<TextInput style={styles.input} placeholder='User' onChangeText={(searchString) => {this.setState({searchString})}}
underlineColorAndroid="transparent"/>
<Icon style={styles.searchIcon} name='fingerprint' size={20} color= '#000' />
</View>
)
}
const styles = StyleSheet.create({
searchSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
searchIcon: {
// padding: 10
paddingRight: 10
},
input: {
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
backgroundColor: '#fff',
color: '#424242',
borderBottomColor: '#000',
borderBottomWidth: 1
}
});
export default TestAtom
Can anyone help me with it.
You should make a View and place the Text Input and Fingerprint icon inside.
A small example of how it will look like.
<View style={{
borderWidth:1,
flex:1,
flexDirection:'row',
alignItems:'center'
}}>
<TextInput/>
<FingerIcon/>
</View>
Have the Textinput and the fingerprint icon as two components in the same view styled as flex-direction:row. Have the bottom ruler part as a separate item which draws under the View of Textinput and the Icon.
import { View, StyleSheet,SafeAreaView,TextInput } from 'react-native'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
function UIComponent(){
<View style={styles.container}>
<View style={styles.componentWrapper}>
<View style={styles.passwordFieldWrapper}>
<TextInput style={styles.textInput} placeholder='umana Password'>
</TextInput>
<MaterialCommunityIcons name="fingerprint" color='green' size={24} />
</View>
<View style={styles.bottomPart}>
</View>
</View>
</View>
}
export default UIComponent
const styles = StyleSheet.create({
container:{
backgroundColor:'#ffffff',
flex:1
},
componentWrapper:{
alignItems:'center',
justifyContent:'center'
},
passwordFieldWrapper:{
flexDirection:'row'
},
textInput:{
width:'50%'
},
bottomPart:{
marginTop:3,
borderBottomColor:'gray',
borderBottomWidth:1,
width:'60%'
}
})
import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { BottomSheet } from "react-native-btr";
export default function BottomSheetDemo() {
const [visible, setVisible] = useState(false);
function toggle() {
setVisible((visible) => !visible);
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={toggle}>
<View style={styles.button}>
<Text>Toggle BottomSheet</Text>
</View>
</TouchableOpacity>
<BottomSheet
visible={visible}
onBackButtonPress={toggle}
onBackdropPress={toggle}
>
<View style={styles.card}>
<Text>Place your custom view inside BottomSheet</Text>
</View>
</BottomSheet>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
button: {
backgroundColor: "#fff",
borderWidth: 2,
borderRadius: 50,
padding: 16,
},
card: {
backgroundColor: "#fff",
height: 250,
justifyContent: "center",
alignItems: "center",
},
});
I am using the above code. So my problem is I am getting the bottom sheet as expected. And I want that it will 100px above the bottom. That is also working fine. But the thing is I am getting bottom and at top blur black background. But I want on the bottom margin-bottom 100. It will not show that black ground. I will start from marginbottom:100. But the bottom background will be transparent and I can do click on the bottom items.
TLDR: working source code. Be aware, this solution might get
messy.
If we see the source code of react-native-btr then we will see that the BottomSheet component is actually a Modal component from react-native-modal passing 4 basic props to react-native-modal as shown below
<Modal
isVisible={visible}
onBackButtonPress={onBackButtonPress}
onBackdropPress={onBackdropPress}
style={{ justifyContent: "flex-end", margin: 0 }}
>
{children}
</Modal>
So, what I did is, extract all the source code from react-native-modal which is just five files and modify this source code. I have put a new prop for react-native-modal called bottomSpacing, so that user can change the bottom spacing.
Back in app.js the code is looking like this
<Modal
testID={"modal"}
isVisible={isModalVisible}
style={{ justifyContent: "flex-end", margin: 0 }} // this line was using in react-native-btr source
bottomSpacing={BOTTOM_SPACING}>
<View style={styles.card}>
<Text>Place your custom view inside BottomSheet</Text>
</View>
</Modal>
Here, BOTTOM_SPACING is used both in bottomSpacing props and the styles.card as following
card: {
marginBottom: BOTTOM_SPACING,
...
}
Bonus: Now you can use all the features of react-native-modal such as changing the color of the shadow and the opacity of that shadow etc.
How do I make a tabbar as in the picture using react-navigation with react native?
As in the picture , How do I do circle tab menu? react-native-svg path should I use?
I tried this code :
export default class TabNavigatorComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.wrapper}>
<View style={styles.container}>
<View style={styles.tabContainer}>
<Text>Tab1</Text>
</View>
<View style={styles.tabContainer}>
<Text>Tab2</Text>
</View>
<View style={styles.tabContainer}>
<Text>Tab3</Text>
</View>
</View>
</View>
)
}
}
My style code :
const styles=StyleSheet.create({
wrapper:{
flex:1,
display: 'flex',
justifyContent:'flex-end',
alignItems:'center',
backgroundColor:colors.white,
},
container:{
flexDirection:'row',
justifyContent: 'center',
alignItems: 'flex-start',
backgroundColor: colors.green01,
height:50,
width:screenInfo.width,
},
tabContainer:{
height:80,
width:80,
borderRadius:70,
borderColor:colors.white,
borderWidth: 1,
marginBottom: 20,
backgroundColor: colors.green01,
},
});
you should read this guide from react navigation specially tab navigation. then you can get style to it like this library or others.
this is my genymotion screen !!!!
this is my code . Just react-native program And the trouble in my photo.Android is Not , IOS is great .how hack in android to make it right .
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class TestScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text></Text>
<View style={styles.parent}>
<View style={styles.children}>
<Text>my content </Text>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
},
parent: {
width:300,
height: 40,
backgroundColor: 'yellow',
alignItems:'center',
position:'absolute',
},
children:{
height:20,
justifyContent: 'center',
top:-10
}
})
How should I Fix it
Overflow is not supported on Android: https://github.com/facebook/react-native/issues/6802
You can try this library:
https://github.com/entria/react-native-view-overflow
Or you could try to do some sort of absolute positioning with your view, but it might not be perfect. The below example puts all of the views in one parent, and then offsets the text to overlap both with an absolute position.
render() {
return (
<View style={styles.container}>
<View style={{ height: 40}}/>
<View style={{ height: 40, backgroundColor: "yellow"}}/>
<View style={{ position: "absolute", top: 30}}>
<Text>my content </Text>
</View>
</View>
)
}
I'm pretty new to ReactNative world. Im struggling to find an api or a library that shows the Progress Dialog as below in React Native. I believe ActivityIndicator can be used, but it does not show as overlay. Can anyone help me how can I show as an overlay using styles or if there is good library to make this.
Thanks
Here is the code to Open Prgressbar:
import React from 'react';
import { Modal, View, Text, ActivityIndicator, Button } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { isProgress: false }
}
openProgressbar = () => {
this.setState({ isProgress: true })
}
render() {
return (
this.state.isProgress ?
<CustomProgressBar />
:
<View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
<Button title="Please click here to Open ProgressBar" onPress={this.openProgressbar} />
</View>
);
}
}
const CustomProgressBar = ({ visible }) => (
<Modal onRequestClose={() => null} visible={visible}>
<View style={{ flex: 1, backgroundColor: '#dcdcdc', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ borderRadius: 10, backgroundColor: 'white', padding: 25 }}>
<Text style={{ fontSize: 20, fontWeight: '200' }}>Loading</Text>
<ActivityIndicator size="large" />
</View>
</View>
</Modal>
);
Expo url for live demo
https://snack.expo.io/#jitendra.mca13/progress-bar-demo
I would approach this by using the React Native Modal component with two Views.
This solution is a React solution and not native, so you will need to style your Modal accordingly for each platform.
import React from 'react';
import {
Modal,
View,
StyleSheet,
Text,
ActivityIndicator
} from 'react-native';
const ProgressDialog = ({ visible }) => (
<Modal
visible={visible}
>
<View style={styles.container}>
<View style={styles.content}>
<Text style={styles.title}>Please Wait</Text>
<View style={styles.loading}>
<View style={styles.loader}>
<ActivityIndicator size="large" />
</View>
<View style={styles.loadingContent}>
<Text>Loading</Text>
</View>
</View>
</View>
</View>
</Modal>
);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, .5)',
alignItems: 'center',
justifyContent: 'center',
},
content: {
padding: 35,
backgroundColor: 'white'
},
title: {
fontSize: 18,
fontWeight: 'bold',
},
loading: {
flexDirection: 'row',
alignItems: 'center',
},
loader: {
flex: 1,
},
loadingContent: {
flex: 3,
fontSize: 16,
paddingHorizontal: 10,
}
})
export default ProgressDialog;
Here's a demo on Expo, of course you will probably want to tweak the CSS.
Android & iOS solution
Create a directory called ProgressDialog
Create index.ios.js and index.android.js
Paste the above code into both index.ios.js and index.android.js
Make CSS changes for iOS
You can use the below npm package which is a very easy and attractive loader with many options.
https://github.com/maxs15/react-native-spinkit
import React from 'react';
import { StyleSheet, View } from "react-native";
import Spinner from "react-native-spinkit";
export default LoadingCmpBig = props => {
return (
<View style={styles.container}>
<StatusBar barStyle="default" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
//backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
});
You can use this component and use it where you want to show the Progress. You just have to maintain the state for visible the loading or not in your render function of the component.