I'm trying to center the Edit text below the image. This the start of the profile page for an app I'm working at so I want the Edit button text to be centered below the image.
Here's the code:
import React from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableHighlight, Alert, Button } from 'react-native';
import { Constants, ImagePicker } from 'expo';
const util = require('util');
export default class TopProfile extends React.Component{
state = {
image: 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg',
};
render() {
let { image } = this.state;
return (
<View style={styles.container}>
<View style={styles.column}>
<TouchableHighlight onPress={this._pickImage}>
{image &&
<Image source={{ uri: image }} style={{ width: 100, height: 100, borderRadius: 50}} />}
</TouchableHighlight>
<Button
style={styles.button}
title="Edit"
onPress={this._pickImage}
/>
</View>
</View>
);
}
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3],
});
console.log(result);
if (!result.cancelled) {
this.setState({ image: result.uri });
}
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
},
column:{
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
paddingLeft: 10,
},
button: {
}
});
module.exports = TopProfile;
And this is what I'm currently getting:
Does anyone have an idea how can I fix this?
There's an error in your column style props.
You've defined alignItems: 'flex-start'. When the flexDirection: 'column', the alignItems prop effects the X-axis of the view, EG how items in the view are horizontally positioned. Setting their alignment to flex-start is not what you want here.
Change your styles to:
column:{
flex: 1,
flexDirection: 'column',
alignItems: 'center', //THIS LINE HAS CHANGED
paddingLeft: 10,
},
it's either you specify the with of the <View style={[styles.column, {width:100, justifyContent:'center'}]} or you wrap your <TouchableHighlight> and <Button> inside another <View>
Related
As you can see in the image below, I have to give some top margin in order to "not" hide my half of the content under the navigation header, isn't header supposed to be a "safe area" for the below content, to be on the safe side I provided the SafeAreaView but still my content goes under the Header and unfortunately I have to give some hardcoded margin top value to avoid hiding.
The above image is when I comment marginTop.
Above image is when I add marginTop: 70
Code:
NotificationScreen.tsx:
import {
View,
SafeAreaView,
Text,
StatusBar,
} from 'react-native';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import OrderItem from '../../components/OrderItem';
const NotificationScreen = () => {
const [orders, setOrders] = useState([]);
useEffect(() => {
// calling API...
}, []);
return (
<SafeAreaView style={styles.container}>
<StatusBar backgroundColor="transparent" translucent />
<Text style={{color: 'lightgray', fontSize: 18}}>My Orders: </Text>
<Animated.FlatList
data={orders}
entering={FadeIn}
leaving={FadeOut}
contentContainerStyle={{
alignItems: 'center',
}}
keyExtractor={(_: any, index) => 'key' + index}
renderItem={({item}) => <OrderItem key={item.id} data={item} />}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 70, // if I remove this, the content goes under the header as shown in image.
flex: 1,
padding: 10,
backgroundColor: COLORS.primary,
},
});
export default NotificationScreen;
One more query, why my OrderItem not taking the full width of FlatList (see image, the gray box is not takin the full width...), I have provided width: 100% to my OrderItem container:
OrderItem.tsx:
const OrderItem = ({data}) => {
return (
<View style={styles.container}>
<View style={styles.textBlock}>
<Text style={styles.label}>Strategy: </Text>
<Text style={styles.info}>{data.strategyTitle}</Text>
</View>
// ... same views as shown in image
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
paddingVertical: 10,
paddingHorizontal: 10,
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: COLORS.lightGray,
borderRadius: 10,
},
textBlock: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
label: {
color: 'grey',
fontSize: 16,
},
info: {
color: 'white',
fontSize: 16,
},
});
export default OrderItem;
The SafeAreaView does not work currently for Android devices. You need to have something like this to avoid this issue:
import { Platform,StatusBar } from "react-native";
const styles = StyleSheet.create({
container: {
paddingTop: Platform.OS == "android" ? StatusBar.currentHeight : 0,
},
});
<SafeAreaView style={styles.container}>
</SafeAreaView>
And for the OrderItem not taking all available width, remove from Animated.FlatList this:
contentContainerStyle={{alignItems: 'center'}}
I'm quite new to react native and trying to set up a search bar with search functionality. I'm trying to set it up where the list updates with each letter typed. The data is displayed fine but the error occurs when I try and type something into the search bar.
Full Error Message
https://ibb.co/Zd5hB52
Here is the file that is having issues
import { StyleSheet, Text, View, Button, StatusBar, ScrollView, TextInput } from "react-native";
import Icon from 'react-native-vector-icons/Ionicons';
import datas from "../components/CurrencyData"
import FavouritesList from "../components/FavouritesList";
const AddToFavourites = () => {
const state = {
datas: datas,
filter: datas
}
const [currencyFilter, setSearch] = useState(state.filter)
const getFlags = () => {
return currencyFilter.map(data => {
return <FavouritesList detail={data} key={data.id}/>
})
}
const searchCurrencies = (searchFor) => {
setSearch({
filterCurrency: datas.filter(i=>
i.name.toLowerCase().includes(searchFor.toLowerCase),
),
});
}
return (
<View style={styles.container}>
<View style= {styles.action}>
<Icon name="search" size={25}/>
<TextInput
style= {{flex: 1}}
placeholder= "Search..."
underlineColorAndroid="transparent"
onChangeText= {text => {searchCurrencies(text)}}
/>
</View>
<ScrollView>
<StatusBar backgroundColor="#1E90FF" barStyle="light-content"/>
{getFlags()}
</ScrollView>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
action: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderWidth: 2,
height: 50,
borderRadius: 30,
paddingLeft: "4%",
paddingRight: "4%",
margin: "3%"
},
})
export default AddToFavourites;```
[1]: https://i.stack.imgur.com/kWkHo.png
with hooks you don't pass the state object like setState, you just pass the new value
change
setSearch({
filterCurrency: datas.filter(i => i.name.toLowerCase().includes(searchFor.toLowerCase)),
});
to
setSearch( datas.filter(I =>i.name.toLowerCase().includes(searchFor.toLowerCase)));
I want to be able to add a <Text> element with the press of a button in react native
Is this possible to make ? and how can i do it ?
my code :
import React, { Component } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'
export default class App extends Component {
onPress = () => {
//some script to add text
}
render() {
return (
<View style = { styles.container }>
<View style = { styles.ButtonContainer }>
//i want to add text here
<Button
onPress={this.onPress}
title="Add item"
color="#FB3640"
accessibilityLabel="Add item"
containerViewStyle={{width: '100%', marginLeft: 0}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: '#fff',
alignItems: 'center',
},
text: {
marginTop: 100,
},
ButtonContainer: {
margin: 20,
width: '90%',
}
});
Thank you !
You need to define a piece of state and initialized it with false. When the user presses the button you have to switch this piece of state to true. Have a look here for more information about the local state: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
Something like that should work:
import React, { Component } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'
export default class App extends Component {
state = {
displayText: false
}
onPress = () => {
this.setState({ displayText: true });
}
render() {
return (
<View style = { styles.container }>
<View style = { styles.ButtonContainer }>
{displayText && <Text>This is my text</Text>}
<Button
onPress={this.onPress}
title="Add item"
color="#FB3640"
accessibilityLabel="Add item"
containerViewStyle={{width: '100%', marginLeft: 0}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: '#fff',
alignItems: 'center',
},
text: {
marginTop: 100,
},
ButtonContainer: {
margin: 20,
width: '90%',
}
});
I have a problem with flex styles.
Scenario
If I put flex: 1 line in my code, the buttons won't show up
If I delete flex: 1 they show up.
Please help me! It's in the new React Native 0.61 I did delete flex but I need it.
How can I fix it? Or is share a bug in 0.61 ...
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Header from './Components/Header';
import StartGameScreen from './screens/StartGameScreen'
export default function App() {
return (
<View styles={styles.screen}>
<Header title="Geuss a Number"/>
<StartGameScreen/>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
}
});
App.js
import React from 'react';
import { View, Text, StyleSheet, TextInput, Button } from 'react-native';
const StartGameScreen = props => {
return(
<View style={styles.screen1}>
<Text style={styles.title}>Start a New Game!</Text>
<View style={styles.inputContainer}>
<Text>Select a Number</Text>
<TextInput />
<View style={styles.buttonContainer}>
<Button title="Reset" />
<Button title="Confirm" onPress={() => {}} />
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
screen1: {
flex: 1,
padding: 10,
alignItems: 'center'
},
title: {
fontSize: 20,
marginVertical: 10
},
inputContainer: {
width: 300,
maxWidth: '80%',
alignItems: 'center'
},
buttonContainer: {
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
paddingHorizontal: 15
}
});
export default StartGameScreen;
StartGameScreen.js
Photo 1: flex: 1 code in my StartGameScreen.js
Photo 2: by deleting flex: 1 code in my StartGameScreen.js the buttons shows
But I need my flex what am I doing wrong? Sorry for my poor post at the beginning its my first post !
try adding flex: 1 to inputContainer and to buttonContainer flex: 1 as well
Below is my full code for QRCode scanner
my code is working fine, but i want to add more effects.
Like while scanning one scan moving line in background want to generate, like that moves top to bottom green or red line .
what properties should I add.
please help to add more properties in qrcodescanner.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
Linking,
View,
Input,
Item,
Button,
AnimationEffect,
ReadableStreamReader,
} from 'react-native';
import { Dimensions } from "react-native";
import QRCodeScanner from 'react-native-qrcode-scanner';
//const SCREEN_HEIGHT = Dimensions.get("window").height;
//const SCREEN_HEIGHT=40;
//const SCREEN_WIDTH=Dimensions.get("window").width;
//const SCREEN_WIDTH=130;
export default class OpenTicket extends Component {
onSuccess(e) {
// console.log(e.data);
this.props.navigation.navigate('OpenApplianceIssue', {
data: e.data,
} );
}
Nextpage() {
// console.log(e.data);
this.props.navigation.navigate('OpenApplianceIssue');
}
onClickListener = () => {
this.props.navigation.navigate('OpenApplianceIssue');
}
static navigationOptions = {
title: 'Open Ticket',
};
render() {
return (
<View style= {{paddingTop:30, paddingBottom:0}}>
// below code is for QRCode scanner
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
cameraProps={{captureAudio: false}}
reactivate = {true}
cameraType={AnimationEffect}
style={ReadableStreamReader}
//cameraStyle={{ height: SCREEN_HEIGHT }}
cameraStyle={{ width: 200, alignSelf:'center'}}
bottomContent={
<Text style={styles.buttonText} onPress={() => this.onClickListener()}>SCAN ITEM{'\n'}
</Text>
}
buttonText={
<Item style={{paddingBottom:10,alignSelf: 'center', justifyContent: 'center', alignItems: 'center'}}>
<Input placeholder='Enter serial number'/>
</Item>
}
/>
<Text>Hello Abhi</Text>
{/* <Item style={{paddingBottom:10,alignSelf: 'center', justifyContent: 'center', alignItems: 'center'}}>
<Input placeholder='Enter serial number'/>
</Item>
<Button full rounded light style={{backgroundColor: 'green', justifyContent: 'center', alignItems: 'center'}}
onPress={() => this.onClickListener()}>
<Text style={{color: 'white'}}>Go</Text>
</Button> */}
</View>
);
}
}
const styles = StyleSheet.create({
centerText: {
flex: 1,
fontSize: 18,
padding: 32,
color: '#777',
},
textBold: {
fontWeight: '500',
color: '#000',
},
buttonText: {
fontSize: 21,
color: 'rgb(0,122,255)',
},
buttonTouchable: {
padding: 16,
},
});
I would give a try to these options for react-native-qrcode-scanner:
showMarker (Use this to show marker on the camera scanning window)
customMarker (Pass a RN element/component to use it as a custom marker)
markerStyle (Use this to add custom styling to the default marker)
UPDATE:
For example, try adding this property to your <QRCodeScanner> element:
showMarker={true}