I have the issue that my buttons from NativeBase do not show their text. I pretty much used the sample code from the documentation of their website, but when I render it it shows three buttons that I can touch, but without any title. Any ideas? Please see code:
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MenuButton from './MenuButton';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>Welcome to the App</Text>
<MenuButton/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: 40,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
textStyle:{
fontSize: 30
}
});
MenuButton.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Container, Content, Button, Badge } from 'native-base';
export default class MenuButtons extends Component {
render() {
return (
<Container>
<Content>
<Button style={styles.button} textStyle={styles.buttonText}> HeLLO!! </Button>
<Button style={styles.button} bordered large> Info </Button>
<Button style={styles.button} bordered capitalize={true}> Primary </Button>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
button: {
backgroundColor: 'orange',
paddingBottom: 30,
paddingTop: 30,
width: 350,
height:40,
},
buttonText:{
fontSize:40,
color:'black'
}
});
Just deleted the "paddingTop" and "paddingBottom" props and the text started to appear.
You have to wrap the text with <Text> tags inside Button opening and closing tags, Try this link. https://snack.expo.io/r1eDZ0wUX (Edited - Removed padding styles from the button too)
<Button style={styles.button}><Text style={styles.buttonText}>HeLLO!!</Text></Button>
<Button style={styles.button} bordered large><Text>Info</Text></Button>
<Button style={styles.button} bordered><Text>Primary</Text></Button>
Looking at the code snippet, it seems that you are not following the documentation.
Text is imported from native-base, and not from react-native
Related
I'm building a React Native app, it uses React Navigation. I use TouchableOpacity throughout the app, however, in a stack navigator screen, it doesn't seem to work at all. Touching the element doesn't change the opacity and the onpress function doesn't work. The screen itself displays fine and all other screens in my app have TouchableOpacity's that work fine.
Using button doesn't respond either, I'm thinking this is a react navigation issue potentially? There is no issues transitioning to the screen though?
Here is my screen;
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert, Button} from 'react-native';
class RaceScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
<Button title="Go back button" onPress = {() => console.log('Hello')}>
</Button>
</View>
);
}
}
export default RaceScreen
I've found that the Touchable components typically don't respond well to text children. You simply need to wrap it inside a View:
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert} from 'react-native';
export default class RaceScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
I finally figured it out. In the createStackNavigator method from react-navigation, transparentCard:true is a deprecated property and was causing the bug. I was using version 3 documentation on a version 4 package of react navigation.
Looking at there site, they have just released version 5 which is great!
A note to the less experienced developers like myself, making sure you're aware of the version of each package you are using is critical for some of these difficult bugs. Don't let it get you down though, react native is elite!
I am new to React Native and I have encountered a problem: my TextBox doesn't stay above the keyboard while I am writing in it.
These are the visuals from the application
Screenshot
And this is my Signup.js:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
import Form from '../components/Form';
import Logo2 from'../components/Logo2';
import {Actions} from 'react-native-router-flux';
export default class Signup extends Component {
goBack() {
Actions.pop()
}
render() {
return(
<View style={styles.container}>
<Logo2/>
<Form type="Registrar"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Ja tens uma conta? </Text>
<TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}>Entra</Text></TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#232122'
},
signupTextCont: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'flex-end',
paddingVertical: 16,
flexDirection: 'row'
},
signupText: {
color: 'rgba(255,255,255,0.7)',
fontSize:16
},
signupButton: {
color: '#FFA200',
fontSize:16,
fontWeight: '500'
}
});
I don't know what I need to code.
Could you please help me?
To replicate my comment that resolved your problem; you can use the component KeyboardAvoidingView from the package react-native. It levels up the area it contains above your virtual keyboard.
Wrap your code like this:
<KeyboardAvoidingView behavior={'position'} enabled>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Ja tens uma conta? </Text>
<TouchableOpacity onPress={this.goBack}>
<Text style={styles.signupButton}>Entra</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
Here's some more info about how it works: https://facebook.github.io/react-native/docs/keyboardavoidingview.
You can wrap your code with KeyboardAvoidingView rather than a normal View so that it can actually lift up any items inside it above the keyboard. You can use <KeyboardAvoidingView behavior="padding">
Hope it helps.
Maybe it's a silly question, How can I use properties of elements within other elements?
I want to show the title of the button that they chose in different places,here is my code:
import React, { Component } from 'react';
import { Text, View, StyleSheet, Button, Alert } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // Version can be specified in package.json
export default class App extends Component {
_handleButtonPress = () => {
Alert.alert(
{Button.title}
);
};
render() {
return (
<View style={styles.container}>
<Text> Whom do you love the most in this world? </Text>
<Text style={styles.paragraph}>
{Button.title}
</Text>
<Button
title="Cat"
onPress={this._handleButtonPress}
/>
<Button
title="mother in law"
onPress={this._handleButtonPress}
/>
<Button
title="dog"
onPress={this._handleButtonPress}
/>
<Button
title="Computer"
onPress={this._handleButtonPress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
In this case I want that every time they choose a button the title of the button appears in different parts, in an alert, in a list, showing the first option and the last one.
[https://snack.expo.io/#julioejurado/-whom-do-you-love-the-most?][1]
You can use 2 ways to achieve that. One is to maintain state in component or across the app, for that look into Redux and React-Redux which is recommended.
Or you can do the following in your code:
<Button title={'Something here'}
onPress={() => this._handleButtonPress('Message to show in alert')}/>
And in your handler function:
_handlerButtonPress = message => {Alert.alert(message)}
As per title, I would like to have a modal opened when clicked on a view
app.js
<View>
<MediaBar onClick={this.toggleModal}> />
<Modal show={this.state.isOpen}
onClose={this.toggleModal}>
`Here's some content for the modal`
</Modal>
</View>
Mediabar.js: https://pastebin.com/6bW5gz99
modal.js: https://pastebin.com/3vQgLyTg
The Modal component has a visible property.
https://facebook.github.io/react-native/docs/modal.html
You just have to update its value using your parent component state.
I will do something like this
App.js
import React, { Component } from 'react';
import { View, Text, Modal, TouchableWithoutFeedback, Dimensions, TouchableOpacity } from 'react-native';
class App extends Component {
state = {
modalVisible: false
}
render() {
return(
<View style={this.styles.viewStyle}>
<Modal visible={this.state.modalVisible}
transparent={true}>
<View style={this.styles.viewStyle}>
<View style={this.styles.dialogStyle}>
</View>
</View>
</Modal>
<View style={this.styles.anotherView}>
<TouchableOpacity onPress={()=> this.setState({ modalVisible: true})}>
<Text>Hello</Text>
</TouchableOpacity>
</View>
</View>
);
}
styles = {
viewStyle: {
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
dialogStyle: {
height: Dimensions.get('window').height*0.2,
width: Dimensions.get('window').width*0.9,
backgroundColor: '#d3d3d3',
elevation: 10,
borderRadius: 5
},
anotherView:{
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center'
}
}
}
export default App;
To Achieve the modal like below:
I can't see why the placeholder won't show up on both of the <TextInput>'s. Also, when the user types something, nothing shows up in those <TextInput> boxes. I would like to know why this is happening.
Here is App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here is Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity} from 'react-native';
class Login extends Component {
render() {
return(
<View>
<TextInput
placeholder={"Email"}
placeholderTextColor={"#E365F4"}
style={styles.input}
/>
<TextInput
placeholder={"Password"}
placeholderTextColor={"#f44242"}
style={styles.input}
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
backgroundColor: 'green',
paddingBottom: 20,
padding: 20,
paddingHorizontal: 150,
marginBottom: 10
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps'
}
});
export default Login;
Here is BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';
export default class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
resizeMode: 'cover'
// resizeMode: 'contain' // Shows image completely.
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
}
});`
Three issues here and it's all dealing with your styling.
By using paddingBottom: 20 and padding: 20, you are effectively reducing what can be shown in the TextInput into a sliver (if even that). To compensate for that, you need to adjust the height as well.
When you do adjust height, you may run into this double height issue. I don't know if that has since been fixed, but take a look at it if you are still seeing issues.
Lastly, paddingHorizontal: 150 pushes it too far horizontally making nothing appear. Reduce that to something much smaller like paddingHorizontal: 15.