I have some issue while rendering TouchableOpacity
import React ,{Component} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
class Button extends Component {
render() {
return(
<TouchableOpacity onPress= {this.props.onPress}
style = {style.buttonStyle}>
<Text style = {style.textStyle}>{this.props.name}</Text>
</TouchableOpacity>
);
}
}
const style = {
textStyle:{
fontSize: 16,
alignSelf: 'center',
color: '#007aff',
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#000',
borderColor: '#007aff',
borderWidth: 1,
borderRadius: 5,
marginLeft: 5,
marginRight: 5
}
}
export {Button};
this is the code for my button component and My button looks like this when i render it
And i used the same component In Login Component and it worked fine...
Expected Button:
Related
Why can't I separate the last two components?
First, I tried to set justifyContent, but it did not work.
Then, I tried to set margin. It works for title and image, but not for components after Image
I think is because I'm setting image height, but without it image will not appear
import React, {useState, useEffect} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
const Card = ({ evento }) => {
return (
<View style={styles.card_container}>
<Text style={styles.titulo}>
{evento.titulo} - R$ {evento.valor}
</Text>
<Image
style={styles.img}
source={{uri: 'https://via.placeholder.com/150'}}
/>
<Text styles={styles.descricao}>{evento.descricao}</Text>
<Text styles={styles.guia}>Organizador: {evento.guia}</Text>
</View>
);
};
const styles = StyleSheet.create({
card_container: {
// flex: 1,
// display: 'flex',
// flexDirection: 'column',
// justifyContent: 'space-between',
fontFamily: 'Rubik-Light',
margin: 3,
marginBottom: 15,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
elevation: 1,
},
titulo: {
fontFamily: 'Rubik-Medium',
margin: 10,
},
img: {
//alignSelf: 'center',
width: 350, //TODO tamanho dinâmico
height: 200,
marginBottom: 10, // word
},
descricao: {
marginBottom: 10,
},
guia: {
marginTop: 10
}
});
export default Card;
It's a typo on the Text component. It should be style for the prop in Text component not styles. Here are the correct codes for the last two components.
<Text style={styles.descricao}>{evento.descricao}</Text>
<Text style={styles.guia}>Organizador: {evento.guia}</Text>
I am using react-native-cn-quill as a text editor in my android app. QuillToolbar touch is not responsive. When I am trying to select an option from the toolbar sometimes it's not being selected and after clicking to superscript/subscript option the keyboard view exit automatically. any solution regarding this?
I am using example code
import React from 'react';
import { SafeAreaView, StyleSheet, StatusBar } from 'react-native';
import QuillEditor, { QuillToolbar } from 'react-native-cn-quill';
export default function App() {
const _editor = React.createRef();
return (
<SafeAreaView style={styles.root}>
<QuillToolbar editor={_editor} options="full" theme="light" />
<QuillEditor
style={styles.editor}
ref={_editor}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
title: {
fontWeight: 'bold',
alignSelf: 'center',
paddingVertical: 10,
},
root: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
backgroundColor: '#eaeaea',
},
editor: {
flex: 1,
padding: 0,
borderColor: 'gray',
borderWidth: 1,
marginHorizontal: 30,
marginVertical: 5,
backgroundColor: 'white',
},
});
I have a component that loads into my app, however I can't get the Surface component to load. The text inside it renders fine, however the parent Surface component does not. It also does not appear in the inspector
My component is below. Any ideas?
import React, {useState, useContext} from 'react';
import {StyleSheet, View} from 'react-native';
import {Surface, Text} from 'react-native-paper';
function UpComing({navigation}) {
return (
<View style={styles.container}>
<Text style={{fontWeight: 'bold', fontSize: 15}}>Upcoming Classes</Text>
<Surface styles={styles.surface}>
<Text>Test</Text>
</Surface>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 20,
marginVertical: 10,
},
surface: {
padding: 8,
height: 80,
width: 80,
alignItems: 'center',
justifyContent: 'center',
elevation: 4,
},
});
export default UpComing;
I am trying to create a box-shadow around a view in react-native version 0.59.9
I have tried 'shadowOffSet' and all shadow properties but no use
import React, { Component } from 'react';
import { Text, View, StyleSheet, PixelRatio } from 'react-native';
const styles = {
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
}
export default class Card extends Component {
render() {
return (
<View style={styles.container}>
<View style={{
borderWidth: 1,
borderRadius: 20,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.8,
shadowRadius: 20,
borderWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)),
elevation: 1,
justifyContent: 'center',
alignItems: 'center',
overflow: this.props.overflow ? this.props.overflow : 'hidden',
width: 120,
height: 150}}>
<Text>Mine</Text>
</View>
</View>
);
}
}
The result is attached as screenshot
https://user-images.githubusercontent.com/14028306/60788321-0a283500-a17a-11e9-841d-5604982783ac.jpg
You can use the react native box shadow generator for the best practice.
https://ethercreative.github.io/react-native-shadow-generator/
please use this example for boxShow in react-native
import React, { Component } from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.buttonStyles}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
buttonStyles: {
backgroundColor: '#f2f2f2',
paddingVertical: 10,
width: '60%',
borderRadius: 10,
shadowColor: 'black',
shadowOpacity: 0.9,
elevation: 10,
},
welcome: {
fontSize: 20,
alignSelf: 'center',
}
});
Your code is valid on ios plateform for the bowShadow but for android you have to pass by the property elevation
Increasing the elevation parameter in your View style will increase the radius of the box-shadow on android devices:
https://snack.expo.io/S1NK7dxbr
As an aside, you have borderWidth listed twice as a style in your nested View component.
I'm now using React Native. Now I'm trying to print out one of states that are initialized ( for instance, showText herein ). When I recall this value in render, it doesn't show up ( blank ). The way that I recall is "{this.state.showText}". It doesn't produce any error messages.
Maybe because of the same reason, the initial value of TouchableHighlight seems to be blank. I'm completely lost here since a sample app in Facebook Github works fine within the website. Please give me any idea on this matter.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ScrollView,
ListView,
TouchableHighlight,
TextInput
} from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}! {this.props.date}~ Class can be added..{'\n'}</Text>
);
}
}
class Test1 extends Component {
constructor(props) {
super(props);
this.state = {
showText: 'true',
showTextBool: true,
wow: 'ddsdfasdf'
};
}
onSignupPress(){
return "hello";
}
render() {
let display = this.state.showTextBool ? 'true' : 'false';
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native! {this.state.showText} {this.state.showTextBool}
{this.state.wow}
</Text>
<TextInput style={styles.searchInput} value={this.state.wow} placeholder='Search via name or postcode'/>
<TouchableHighlight style={styles.button} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
<Text style={styles.welcome}>
{display} + {this.onSignupPress()} + {this.state.showText}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
buttonText: {
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
flex: 1,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchInput: {
height: 36,
padding: 4, marginRight: 5,
flex: 4,
fontSize: 18, borderWidth: 1, borderColor: '#48BBEC', borderRadius: 8, color: '#48BBEC'
}
});
AppRegistry.registerComponent('Test1', () => Test1);
I tried your code in react native express page. It renders one "true", but you are expected two (the text and the boolean). In the following part:
Welcome to React Native! {this.state.showText} {this.state.showTextBool}
The text is being rendered properly (it says indeed 'true'), but the boolean is not there, mainly because you cannot render a boolean like that. Try with the following:
{String(this.state.showTextBool)}
This will render the boolean value properly.