I am new to react. I want to create a vertical button using react native. How can I do that? The required image of button is attached for your reference. Any help would be really appreciated.
Here is a simple way to do it using Switch:
(First picture: IOS, Second picture: Android)
import React, { Component } from 'react';
import { Text, View, StyleSheet, Switch } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
state = {
accept: false
}
render() {
return (
<View style={styles.container}>
<View style={{flex: 2, alignItems: "center"}}>
<Text>Turn on the switch when you want to accept work, and turn it off when you dont!</Text>
</View>
<View style={{flex: 1, alignItems: "center"}}>
<Switch
style={styles.verticalSwitch}
value={this.state.accept}
onTintColor="blue"
onValueChange={() => this.setState({accept:!this.state.accept})}
/>
<Text style={{marginTop: 12}}>
{this.state.accept ? "on" : "off"}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
paddingHorizontal: 20,
},
verticalSwitch: {
transform: [{ rotate: '-90deg'}]
}
});
Related
I'm a 13-year-old react-native beginner. I would like to know why my buttons width isn't changing. I checked several websites but I couldn't;t find any answers. Please change my code and show what I did wrong.
Thank you.
import React from "react";
import {
ImageBackground,
StyleSheet,
Text,
View,
Button,
Alert,
} from "react-native";
const image = {
uri:
"https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
};
const ReactApp = () => (
<View style={styles.container}>
<ImageBackground source={image} style={styles.image}>
<Text style={styles.text}>React native</Text>
<Button
title="Button"
color="#042e6e"
onPress={() => Alert.alert("Button pressed")}
/>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center",
},
text: {
color: "white",
fontSize: 30,
fontWeight: "bold",
alignSelf: "center",
},
});
export default ReactApp;
You cant put styles directly to a button
you have to wrap it in a view and set the width of the view
<View style={{width:100}}>
<Button
title="Button"
color="#042e6e"
onPress={() => Alert.alert("Button pressed")}
/>
</View>
I am trying to create a scroll view in react native.
I gave full-device-width and height for the scroll-view.
width is working but height is not working so the app is showing only on down part of the emulator,
I would like to know how can I make this showing up in fullscreen and also why this error occurring.
this is how it's loading on emulator.
you can find my react-native code below
import React, { Component } from 'react';
// import Counterpart from './Counterpart'
import contacts from './contacts'
import {
View,
Button,
ScrollView,
Switch,
Text,
Input,
StyleSheet,
Dimensions,
} from 'react-native';
const widthfull = Dimensions.get('window').width; //full width
const heightfull = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
mainwrap: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
zIndex:1,
},
countfont: {
fontSize: 120,
},
marginfromtop: {
display: 'flex',
flex: 1,
paddingTop: 50,
},
ScrollViewstles: {
display: 'flex',
flex: 1,
margin:0,
padding:0,
zIndex:2,
width:widthfull,
height:heightfull,
paddingLeft:30
}
});
export default class App extends Component {
state = {
showCounter: true
}
toggglecounter = () => {
this.setState(() => ({showCounter: !this.state.showCounter}))
}
render() {
if (this.state.showCounter) {
return (
<View style={styles.mainwrap}>
<View style={[styles.marginfromtop, styles.countfont]}>
<Button
style={{ marginTop: 50 }}
onPress={this.toggglecounter}
title="Toggle Contacts"
/>
</View>
<View style={styles.mainwrap}>
<ScrollView style={styles.ScrollViewstles}>
{contacts.map(c => (
<Text key={c.key}>{c.name}</Text>
))}
</ScrollView>
</View>
</View>
);
} else {
return (
<View style={[styles.marginfromtop, styles.countfont]}>
<Button
style={{ marginTop: 50 }}
onPress={this.toggglecounter}
title="Toggle Contacts"
/>
</View>
);
}
}
}
remove flex: 1 from marginfromtop
marginfromtop: {
paddingTop: 50,
},
In my app, I have a screen that shows three rows that contain some text and a background image.
I used to only put the image, but I want to be able to press on the images to execute an action. This was my code before and it worked properly :
import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '#react-navigation/native';
import SelectorBox from '../../components/workout/SelectorBox';
const EXERCISE = require('../../assets/workout/exercise.jpg');
const MUSCLES = require('../../assets/workout/muscles.jpg');
const ROUTINE = require('../../assets/workout/routine.jpg');
export default function SelectorScreen() {
const {t} = useTranslation();
const navigation = useNavigation();
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: "blue"}}>
<SelectorBox image={MUSCLES} title={t('workout.muscleGroups')} />
<SelectorBox image={EXERCISE} title={t('workout.exercises')} />
<SelectorBox image={ROUTINE} title={t('workout.routines')} />
</View>
)
}
import React from 'react'
import {Text, View, ImageBackground, StyleSheet, Dimensions} from 'react-native'
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
export default function SelectorBox(props) {
return (
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
However, when I change the code, all my SelectorBox disappear...
export default function SelectorBox(props) {
return (
<TouchableWithoutFeedback style={styles.option}>
<ImageBackground source={props.image} style={styles.background}>
<View style={styles.titleBar}>
<Text style={styles.title}>{props.title}</Text>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
option: {
flex: 1,
width: Dimensions.get('window').width,
// backgroundColor: 'red'
},
background: {
flexDirection: "column",
alignItems: 'center',
justifyContent: 'center',
flex: 1,
width: Dimensions.get('window').width,
},
titleBar : {
width: Dimensions.get('window').width,
height: 60,
backgroundColor: '#ffb623',
justifyContent: 'center'
},
title: {
fontWeight: "900",
fontSize: 32,
alignSelf: 'center',
}
})
I would like to be able to keep it like this screenshot everywhere. Right now, the screen is empty. (blue background, this is what i set it to)
Can you guide me ?
Try to debug the issue by steps.
Try and and import TouchableOpacity from react-native instead of react-native-gesture-handler. Does the backgroundColor: 'red' color works if uncomment it from the option style?
Change this:
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
to import from RN:
import { TouchableWithoutFeedback } from 'react-native'
You should consider of using TouchableOpacity instead of TouchableWithoutFeedback:
TouchableWithoutFeedback
Do not use unless you have a very good
reason. All elements that respond to press should have a visual
feedback when touched.
TouchableWithoutFeedback supports only one child. If you wish to have
several child components, wrap them in a View. Importantly,
TouchableWithoutFeedback works by cloning its child and applying
responder props to it. It is therefore required that any intermediary
components pass through those props to the underlying React Native
component.
I am developing a react-native application. One of the app screens contains a list of albums. I have divided each album container into components which are Card and CardSection.
A Card can contain many CardSections. The CardSection will contain an image and 2 Text titles. The problem I am facing is with the positioning of the content in the CardSection as flexDirection:'row' is not working.
Here is the CardSection.js
import React from 'react';
import {View, Text, Image} from 'react-native';
import Card from './Card';
import CardSection from "./CardSection";
const AlbumDetail = ({album}) => {
// destructing the props
const {title, artist, thumbnail_image} = album;
return (
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} />
</View>
<View style={styles.headerContentStyle} >
<Text style={styles.headerTextStyle}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTextStyle:{
fontSize:18
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
margin: 10,
marginRight: 10
}
};
export default AlbumDetail;
Here is the CardSection.js
import React from 'react';
import {View} from 'react-native';
const CardSection = (props) => {
return (
<View styles={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: "row",
borderColor: '#ddd',
position: 'relative'
}
};
export default CardSection;
The resultant should that the Image placed towards the left and on the right side of the image there will be 2 Text titles and their flexDirection will be column
<View styles={styles.containerStyle}> you have typo, it is styles, the prop should be style.
use this
headerContentStyle: {
flexDirection: 'row',
justifyContent: 'space-around'
}
instead of
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
}
You have to use card containerStyle props in CardSection.js file.
there you should have to use flexDirection :'row' .
Hope it will work.
I had a similar problem where flexDirection: 'row' was not working in one of my components that I was importing in App.js.
What was causing this was the alignItems: 'center' in the stylesheet for the main container in my App.js file.
I hope this helps someone.
You can check this.
import { TouchableOpacity } from 'react-native'
I have created a component which itself is composed of several components.Now all these components will get data dynamically and i need to repeat this main component N no of times.Here is the screenshot of the component to be repeated.
The colored panel will have some data and the heading and all text will be updated dynamically.
Here is the code which i have written so far
//FirstScreen.js
import React from 'react';
import { Text, StyleSheet, View, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import SquareCircle from './Square_circle_Button'
import CirclePlus from './circle_plus'
import DateComponent from './DateComponent'
import LibraryComponent from './LibraryComponent'
class FirstScreen extends React.Component
{
constructor(props)
{
super(props);
}
render() {
return <View style={{ flex: 1, flexDirection: "column" }}>
<DateComponent DateDisplay={this.props.DDate}/>
<View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
<LibraryComponent Heading={this.props.send_heading} DisplayData={this.props.DData}/>
</View>
</View>;
}
}
//LibraryComponent.js
import React from "react";
import { Text, StyleSheet, View, TouchableHighlight } from "react-native";
export default class LibraryComponent extends React.Component
{
render(){
return <View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
<View style={{ flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<Text>{this.props.Heading}</Text>
</View>
<View style={{ flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<Text>{this.props.DisplayData}</Text>
</View>
<View style={{ flex: 4, flexDirection: "row", alignContent: "center", justifyContent: "center" }}>
<View style={{ width: 50, height: 50, backgroundColor: "powderblue" }} />
<View style={{ width: 50, height: 50, backgroundColor: "skyblue" }} />
<View style={{ width: 50, height: 50, backgroundColor: "steelblue" }} />
<View style={{ width: 50, height: 50, backgroundColor: "gray" }} />
</View>
</View>;
}
}
//DateComponent.js
import React from "react";
import { Text, StyleSheet, View, TouchableHighlight } from "react-native";
export default class DateComponent extends React.Component
{
render()
{
return(
<View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
<Text>{this.props.DateDisplay}</Text>
</View>);
}
}
//TimeScroll.js
import React from 'react'
import {FlatList,View} from 'react-native'
import FirstScreen from './FirstScreen'
import CirclePlus from './circle_plus'
import AddCircle from './Square_circle_Button'
export default class Timeline extends React.Component
{
render()
{
return(
<FlatList style={{flex:1}}>
data={[
{key:"20 Mar 2018"},
]}
renderItem={({item}) =><View style={{flex:1}}>
<FirstScreen send_heading={item.key} DData={item.key} DDate={item.key}/>
</View>}
<CirclePlus/>
<AddCircle/>
</FlatList>
);
}
}
If requested,Let me know how should i modify the structure to accomplish this task properly.
You just need to structure your prop data to be an array of objects where each object has the data for each color palette:
//FirstScreen.js
import React from 'react';
import { Text, StyleSheet, View, TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import SquareCircle from './Square_circle_Button'
import CirclePlus from './circle_plus'
import DateComponent from './DateComponent'
import LibraryComponent from './LibraryComponent'
class FirstScreen extends React.Component
{
constructor(props)
{
super(props);
}
renderColorPalettes = () => {
const { colorData } = this.props;
return colorData.map( palette => {
return <LibraryComponent Heading={palette.heading} DisplayData={palette.data}/>
});
};
render() {
const colors = renderColorPalettes();
return <View style={{ flex: 1, flexDirection: "column" }}>
<DateComponent DateDisplay={this.props.DDate}/>
<View style={{ flex: 4, flexDirection: "column", justifyContent: "space-evenly" }}>
{colors}
</View>
</View>;
}
}