As show below screen shot with and without keyboard.
this is the code below please help me to remove this white section thanks in advance
class Home extends Component {
state = {
email: '',
password: ''
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
}
render() {
return (
<View style={styles.main_container}>
<View style={styles.login_container}>
<Input
placeholder='INPUT WITH ICON'
leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
/>
</View>
</View>
);
}
}
Here are the styles that I am using:
main_container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2e3344',
flexDirection: 'row',
width: '100%',
height: '100%',
position: 'absolute',
},
login_container: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
flex: 0.7,
},
input: {
margin: 15,
height: 40,
minWidth: 200,
maxWidth: 200,
backgroundColor: '#fafafa',
borderColor: '#7a42f4',
borderWidth: 1,
textAlign: 'center'
},
Related
I'm trying to add a tap gesture to the render card of react-native-deck-swiper using the TapGestureHanlder from react-native-reanimated.
Currently, it works when tapping the red zone outside the swiper, but I want to tap the picture and get the x position where I tapped.
This is the code of the red zone, there I'm calling a class component in which I'm using the deck-swiper with some extra functions.
const onSingleTapEvent = (event) => {
if (event.nativeEvent.state === State.ACTIVE) {
alert('Hey single tap!');
}
};
return (
<GestureHandlerRootView style={{ zIndex: 10 }}>
<TapGestureHandler onHandlerStateChange={onSingleTapEvent}>
<AnimatedView style={styles.container}>
<ImageSwiperDeck
index={index}
listOfAssetsWithinTheAlbum={listOfAssetsWithinTheAlbum}
moveImageToTrashBin={moveImageToTrashBin}
keepImageInAlbum={keepImageInAlbum}
/>
</AnimatedView>
</TapGestureHandler>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: {
height: 560,
width: 500,
zIndex: 10,
backgroundColor: 'red',
},
});
export default ImageSwiper;
This is the deck-swiper code which works fine.
return (
<Swiper
ref={(swiper) => {
this.swiper = swiper;
}}
cards={this.props.listOfAssetsWithinTheAlbum}
cardIndex={this.props.index}
renderCard={this.Card}
backgroundColor={'transparent'}
onSwipedLeft={this.deleteImage}
onSwipedRight={this.keepImage}
cardVerticalMargin={10}
stackSize={5}
stackScale={20}
stackSeparation={5}
animateOverlayLabelsOpacity
animateCardOpacity
disableTopSwipe
disableBottomSwipe
overlayLabels={{
left: {
title: 'DELETE',
style: {
label: {
backgroundColor: colors.red,
borderColor: colors.red,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: -20,
},
},
},
right: {
title: 'KEEP',
style: {
label: {
backgroundColor: colors.blue,
borderColor: colors.blue,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: 20,
},
},
},
}}
/>
);
I am designing an app in React Native and the problem I am facing right now is when I try to type in the TextBox, the keypad comes up and it pushes up or out the view changing height dynamically of other views too. Please check the Before and After image below:
The Code:
import React, { Component } from 'react';
import t from 'tcomb-form-native'; // 0.6.9
const Form = t.form.Form;
import {
StyleSheet,
View,
KeyboardAvoidingView,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import { RFPercentage, RFValue } from "react-native-responsive-fontsize";
const styles = StyleSheet.create({
parentSectionContainer: {
flex: 1,
justifyContent: 'space-evenly',
backgroundColor: '#F1F0F2'
},
SignupFormParent: {
marginTop: 100,
alignSelf: 'center',
backgroundColor: '#FFFFFF',
height: '45%',
width: '85%',
borderRadius: 100,
shadowColor: '#2AC062',
shadowOpacity: 0.4,
shadowOffset: { height: 10, width: 0 },
shadowRadius: 20,
},
textMelow: {
width: RFPercentage(10),
fontSize: RFPercentage(2),
fontWeight: "normal",
color: '#FFFFFF',
textTransform: 'uppercase',
fontStyle: 'normal'
},
textBold: {
width: RFPercentage(10),
fontSize: RFPercentage(2),
fontWeight: "bold",
color: '#FFFFFF',
textTransform: 'uppercase',
fontStyle: 'normal'
},
btnContainer: {
paddingTop: 8,
width: '100%',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignContent: 'center'
},
signupBodyStyle: {
position: "absolute",
bottom: 0,
width: '90%',
marginBottom: 20,
},
signinSignupButtonsBtnsContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%'
},
signupButtonBodyStyle: {
flex: 1,
backgroundColor: '#8A56AC',
borderRadius: 100,
alignItems: 'center',
padding: 25
},
signinSignupTextStyle: {
color: '#FFFFFF',
fontSize: 18,
}
});
const User = t.struct({
name: t.String,
email: t.String,
password: t.String,
"Confirm Password": t.String,
location: t.String
});
const SignupForm = (props) => {
const options = {
auto: 'placeholders',
};
return (
<View style={styles.SignupFormParent}>
<View style={{ paddingLeft: 20, paddingRight: 20, marginTop: 80 }}>
{/* <Text style={styles.text}>FORM</Text> */}
<Form type={User} options={options}/>
</View>
</View>
);
};
const ContinueButton = (props) => {
const { onPress, style } = props;
return (
<TouchableOpacity onPress={onPress} style={style.bodyStyle}>
<View
style={style.buttonStyle}>
<Text style={style.textStyle}>{props.title}</Text>
</View>
</TouchableOpacity>
);
}
export default class SignUpView extends Component {
// constructor(props) {
// }
fetch('${Config.IP}:${Config.PORT}/login', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: 'jayndoe#foobar.com',
password: "jynd1234",
}),
})
.then(response => response.json())
.then(responseJson => {
ToastAndroid.showWithGravity(
JSON.stringify(responseJson),
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
})
.catch(error => {
ToastAndroid.showWithGravity(
JSON.stringify(error),
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
})
}
render() {
return(
<View style={styles.parentSectionContainer}>
<KeyboardAvoidingView style={{ position: 'absolute', top: 0, width: '100%', backgroundColor: '#8A56AC', height: '30%', borderBottomLeftRadius: 120 }}/>
<View style={{ position: 'absolute', top: 50, width: '100%', flexDirection: 'row', justifyContent: 'space-evenly', margin: 'auto' }}>
<Text style={styles.textBold}>LOG IN</Text>
<Text style={styles.textMelow}>SIGN UP</Text>
</View>
<SignupForm
title="SIGN UP USING INSTAGRAM"
onPress={() => {this.instagramSSO()}}
style={{formStyles: styles.formStyles}}
/>
<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center' }}>
<ContinueButton
title="CONTINUE"
style={{ bodyStyle: styles.signinBodyStyle, buttonStyle: styles.signinButtonBodyStyle, textStyle: styles.signinSignupTextStyle }}
onPress={() => Alert.alert('Please sign-in!!')}
/>
</View>
</View>
);
}
}
Appreciate any help in resolving this issue :)
This is because of the absolute positionning of your views,
I think you used it because you needed to put the white input wrapper on top of the purple one view. Maybe you could remove the absolute positionning and use negative paddingTop on the white wrapper instead ? I am not sure how to achieve this using good practices, but that could prevent the keyboardavoidingview to push your other components.
I have integrated React Native navigation package. I want to add badge with the dynamic value on my topBar rightButton.
Github link of the package:: https://github.com/wix/react-native-navigation
I want an output like this. You can check this screenshot::
Issue::
If I am adding a count value on notification icon then there is no event occurs when I am trying to click on button. On click of this button I want to open up my notification screen.
Code:
static options({ menuIcon }) {
return {
topBar: {
title: {
fontFamily: font,
fontSize: fontSize.heading,
color: colors.white,
alignment: 'center',
text: strings.dashboard
},
alignment: 'center',
elevation: 0,
noBorder: true,
background: {
color: colors.dark
},
leftButtons: [
{
id: 'openSideMenu',
icon: menuIcon ? menuIcon : APIURLServiceSingleton.getInstance()._menuIcon
}
],
rightButtons: [
{
id: 'notificationButton',
component: {
name: 'component.notificationButton'
}
}
]
}
}
}
Code for my custom component::
<TouchableOpacity
onPress={() => this.openSystemAlerts()}
style={{ position: 'absolute', right: 0, bottom: -13 }}
>
<View style={styles.button}>
<View style={[posRelative]}>
<Icon
name="notifications-none"
size={27}
color={colors.white}
/>
{(unseen_count && unseen_count > 0) &&
<Text style={styles.badge}>{unseen_count}</Text>
}
</View>
</View>
</TouchableOpacity>
Environment
React Native Navigation version: 2.12.0
React Native version: 0.58
Platform(s) : IOS only(on version 10.0)
It seems that, position:'absolute' is creating problem,
Either ,
add zIndex:2 ...here, number must be greater than any other zIndex in its parent or if there is not any zIndex used then any number>0 is fine.
or
remove position:'absolute' and try styling without it.
try this component; worked fine for me
https://github.com/RajenderDandyal/smart-city-Mobile-App/blob/master/src/UI/TopBarCartCount/index.js
`
class TopBarCartCount extends Component {
handleCartPress = () => {
if (!this.props.isAuthenticated) {
NavigateUser(2, componentIds.myAccountStack, screenNames.signIn)
} else {
NavigateUser(2, componentIds.myAccountStack, screenNames.myCart)
}
};
render() {
return (
<View style={styles.containerWrapper}>
<TouchableOpacity onPress={this.handleCartPress}>
<View style={styles.container}>
{cartPlus}
<View style={styles.badge}>
<Text style={styles.countText}>
{this.props.cart.length}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
}
}
let mapStateToProps = (state) => {
return {
cart: state.auth.user.cart ? state.auth.user.cart : [],
isAuthenticated: state.auth.isAuthenticated
}
}
export default connect(mapStateToProps)(TopBarCartCount);
const styles = StyleSheet.create({
containerWrapper: {
flex: 1,
height: 40,
width: 50,
justifyContent: 'center',
paddingTop: 15,
paddingRight: 5,
alignItems: 'center'
},
container: {
flex: 1,
height: 40,
width: 50,
paddingLeft: 5,
flexDirection: 'row',
alignItems: 'flex-start'
},
badge: {
backgroundColor: themeConstants.danger,
width: 15,
height: 15,
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 0,
paddingTop: 1,
paddingBottom: 2,
marginLeft: 0,
borderRadius: 10
},
countText: {
fontSize: 10,
paddingLeft: 0,
color: themeConstants.offWhite
}
});`
I want the text and image to be on one line and centered.
How can I center it?
I updated my code with another require
SearchBox will center when start, and then click to start type, it will be margin left (sorry guys, my english so bad).
constructor(props: any) {
super(props);
this.state = {
onEdit: false,
}
this.onBlur = this.onBlur.bind(this);
this.onEndEditing = this.onEndEditing.bind(this);
}
private onBlur() {
this.setState({
onEdit: true
});
}
private onEndEditing() {
this.setState({
onEdit: !this.state.onEdit
});
}
private get searchView() {
const { onEdit } = this.state;
return (
<View style={styles.searchContainer}>
<View style= {[styles.search, onEdit === true || this.props.keyword.length !== 0 ? undefined : { justifyContent: 'center' }]}>
<Image source={searchIcon} style={[styles.image, { marginLeft: onEdit === true || this.props.keyword.length !== 0 ? 10 : 0 }]} />
<TextInput
style={styles.searchInput}
placeholder={'search'}
onEndEditing={this.onEndEditing}
onFocus={this.onBlur}
defaultValue={this.props.keyword}
clearButtonMode="while-editing"
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
searchContainer: {
height: 72,
padding: 16,
},
search: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
height: 40,
},
image: {
marginRight: 10,
alignSelf: 'center'
},
searchInput: {
paddingRight: 10,
fontSize: 14,
},
})
Update: I got a new error when I type text in search box. It was hidden for the first few characters.
You need to use flex instead of flexBox.
Here you go:
render() {
return (
<View style={styles.container}>
<View style={styles.searchContainer}>
<Image source={IC_PRIVATE_CLUB_NORMAL} style={styles.image} />
<TextInput
style={styles.searchInput}
placeholder={'search'}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
searchContainer: {
height: 72,
width: '90%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
flexDirection: 'row'
// padding: 16,
// paddingLeft: 10,
// paddingRight: 10,
// flex: 1,
},
search: {
// width: '80%',
flexDirection: 'row',
alignItems: 'center',
height: 60,
backgroundColor: 'gray'
},
image: {
marginRight: 10,
alignSelf: 'center'
},
searchInput: {
height: 40,
width: '80%',
fontSize: 14,
textAlign: 'center',
backgroundColor: 'red'
},
})
It is my intention to have a 7x7 grid of tiles. I try to make each tile 30 wide and 30 tall. The result is a rectangle wider than it is tall. I want a square.
Board.js
export default class Board extends React.Component {
render() {
if (!this.props.rows) {
return <View></View>
}
let rows = this.props.rows;
return(
<View style={styles.container}>
<Row tiles={rows[0]}/>
<Row tiles={rows[1]}/>
<Row tiles={rows[2]}/>
<Row tiles={rows[3]}/>
<Row tiles={rows[4]}/>
<Row tiles={rows[5]}/>
<Row tiles={rows[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 210,
flex: 1,
flexDirection: 'row',
width: 210,
backgroundColor: '#434f4f',
color: '#000000',
},
});
Row.js
export default class Row extends React.Component {
render() {
let tiles = this.props.tiles;
return(
<View style={styles.container}>
<TileView tile={tiles[0]}/>
<TileView tile={tiles[1]}/>
<TileView tile={tiles[2]}/>
<TileView tile={tiles[3]}/>
<TileView tile={tiles[4]}/>
<TileView tile={tiles[5]}/>
<TileView tile={tiles[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 210,
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
});
TileView:
export default class TileView extends React.Component {
render() {
// return <View></View>;
// console.log(this.props.data);
const kind = this.props.tile[0];
const wall = this.props.tile[1];
const team = this.props.tile[2];
console.log("Kind" + kind);
console.log("Wall" + wall);
console.log("Team" + team);
let tileStyle = "teamNone";
if (team === "o") {
tileStyle = "teamO";
} else if (team === "x") {
tileStyle = "teamX";
}
console.log("The style" + tileStyle);
return <View style="teamNone"><Text>T</Text></View>
}
}
const styles = StyleSheet.create({
teamX: {
color: "#77d4d4",
width: 30,
height: 30
},
teamO: {
color: "#9ed36c",
width: 30,
height: 30
},
teamNone: {
color: "red",
width: 30,
height: 30
}
});
My main app
render() {
if (!this.state) {
return <View></View>
}
const {playerId, yourTurn, opponentTurn, finished} = this.state;
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={"foo" + index}>Override{item}</Text>
if (this.state.table) {
let table = this.state.table;
console.log("Biscuit");
console.log(table.board);
return <View style={styles.boardContainer}>
<Board rows={table.board}/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
boardContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
buttons: {
height: 100
},
button: {
color: '#cccccc'
},
list: {
flex: 1
},
playerId: {
marginTop: 100,
color: "white",
height: 40
}
});
How do I exactly set the height and width of my TileViews, Rows and Board such that the total Board is a square with each tile taking up a square shape?
Thank you! Great answer. How can I center the content? I tried running the code changing Text to T and get
Remember that no all devices have the same Width and Height.
I recommend you to use Dimensions component from react-native to have your design a bit more responsive. I made an Expo Snack for you
click here for see it in action
import { Dimensions } from "react-native"; //in ALL your self created components
// you should declare a constant for both dimensions on the top of the code
const {
width: MAX_WIDTH,
height: MAX_HEIGHT,
} = Dimensions.get('window');
change the following property from your MainApp.js Styles
boardContainer: {
flex:1,
height: MAX_HEIGHT,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: '#434f4f',
alignItems: 'center',
justifyContent: 'center',
},
Change the following property style from your Board.js
const styles = StyleSheet.create({
height: MAX_WIDTH,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'center',
padding:10,
},
});
Change the following property style from your Row.js
container: {
height: ((MAX_WIDTH-20)/7),
width: (MAX_WIDTH-20),
flexDirection: 'row',
backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'space-between',
}
Change the following property style from your TileView.js
teamNone: {
height:((MAX_WIDTH-22)/7)),
width: ((MAX_WIDTH-22)/7),
backgroundColor: "red",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
padding:10,
}