I'm trying to create a separator line between text.
Here is my Separator component
import { View, StyleSheet } from "react-native";
const Seperator = () => {
return <View style={styles.seperator} />;
};
const styles = StyleSheet.create({
seperator: {
borderBottomColor: "red",
borderBottomWidth: StyleSheet.hairlineWidth,
marginVertical: 1,
},
});
export default Seperator;
Here is the settings screen I'm trying to use seperator.
import { View, Text, StyleSheet } from "react-native";
import Seperator from "../components/Seperator";
const SettingsScreen = () => {
return (
<View style={styles.container}>
<Text>I'm a SettingsScreen</Text>
<Seperator />
<Text>I'm a SettingsScreen</Text>
<Seperator />
<Text>I'm a SettingsScreen</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "blue",
},
});
export default SettingsScreen;
I have done many searches but could not find a solution.
Try this in your Separator component
const styles = StyleSheet.create({
seperator: {
height: 1,
backgroundColor: "red",
marginVertical: 1,
},
});
or you can give
I added height + you can give height: StyleSheet.hairlineWidth and removed borderBottomColor: "red"
I hope that helps.
Related
I'm new to react native and trying to create a button, here is my StartScreen:
import React from 'react' import Background from '../components/Background' import AppButton from '../components/AppButton'
export default function StartScreen({ navigation }) {
return(
<Background>
<AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />;
</Background>
) }
Here is my AppButton:
import React from 'react'
import { StyleSheet, TouchableOpacity, Text } from "react-native";
export default function AppButton ({ onPress, title, size, backgroundColor }) {
return (
<TouchableOpacity
onPress={onPress}
style={[
styles.appButtonContainer,
size === "sm" && {
paddingHorizontal: 8,
paddingVertical: 6,
elevation: 6
},
backgroundColor && { backgroundColor }
]}
>
<Text style={[styles.appButtonText, size === "sm" && { fontSize: 14 }]}>
{title}
</Text>
</TouchableOpacity>
)
};
const styles = StyleSheet.create({
screenContainer: {
flex: 1,
justifyContent: "center",
padding: 16
},
appButtonContainer: {
elevation: 8,
backgroundColor: "#009688",
borderRadius: 10,
paddingVertical: 10,
paddingHorizontal: 12
},
appButtonText: {
fontSize: 18,
color: "#fff",
fontWeight: "bold",
alignSelf: "center",
textTransform: "uppercase"
}
});
Here is my Background:
import React from 'react'
import { ImageBackground, StyleSheet, KeyboardAvoidingView } from 'react-native'
import { theme } from '../core/theme'
export default function Background({ children }) {
return (
<ImageBackground style={styles.background}>
<KeyboardAvoidingView style={styles.container} behavior="padding">
{children}
</KeyboardAvoidingView>
</ImageBackground>
)
}
const styles = StyleSheet.create({
background: {
flex: 1,
width: '100%',
backgroundColor: theme.colors.surface,
},
container: {
flex: 1,
padding: 20,
width: '100%',
maxWidth: 340,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
},
})
When I try to run the application in my Android phone I get the following error:
Error: Text strings must be rendered within a component.
Blockquote
But I cant figure out where this error happens. Can someone spot the mistake?
You have an unnecessary semicolon (;) in your StartScreen JSX, remove it.
export default function StartScreen({ navigation }) {
return(
<Background>
<AppButton title="HEEEY!" size="sm" backgroundColor="#007bff" />
</Background>
); }
When I click the RoundedButton the TouchableOpacity works i.e the opacity of the button reduces but the onPress function doesn't work, the data being passed to the onPress function is correct(as given in the code below). Also, when I tried to console.log("something") inside the onPress function, it doesn't get printed in the console of my terminal.
Here I have the code with function component.
Focus.js file
import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { TextInput } from "react-native-paper";
import { RoundedButton } from "../../component/RoundedButton";
export const Focus = ({ addSubject }) => {
const [tmpItem, setTmpItem] = useState();
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<View style={styles.inputContainer}>
<TextInput
style={{ flex: 1, marginRight: 20 }}
onSubmitEditing={({ nativeEvent }) => {
setTmpItem(nativeEvent.text);
console.log("tmpItem value set " + tmpItem);
}}
/>
<RoundedButton
size={50}
title="+"
onPress={() => {
console.log("value passed!");
addSubject(tmpItem);
}}
/>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleContainer: {
flex: 0.5,
padding: 10,
justifyContent: "center",
},
title: {
color: "white",
fontWeight: "bold",
fontSize: 21,
},
inputContainer: {
paddingTop: 10,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
});
RoundedButton.js File
import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
...props
}) => {
return (
<TouchableOpacity style={[styles(size).radius, style]}>
<Text style={[styles.text, textStyle]}>{props.title}</Text>
</TouchableOpacity>
);
};
const styles = (size) =>
StyleSheet.create({
radius: {
borderRadius: size / 2,
width: size,
height: size,
alignItems: "center",
justifyContent: "center",
borderColor: "white",
borderWidth: 2,
},
text: {
color: "white",
fontSize: size / 3,
},
});
App.js file
import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Focus } from "./src/features/focus/Focus";
export default function App() {
const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
{focusSubject ? (
<Text style={{ flex: 1, color: "white", fontSize: 30 }}>
Here is where I am going to build a timer
</Text>
) : (
<Focus addSubject={setFocusSubject} />
)}
<Text style={{ flex: 1, color: "white", fontSize: 30 }}>
{focusSubject}
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 50,
backgroundColor: "#252250",
},
});
you need to extract your onPress props in RoundButton.js and pass to your TouchableOpacity
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
onPress,//<===this
...props
}) => {
return (
<TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
<Text style={[styles.text, textStyle]}>{props.title}</Text>
</TouchableOpacity>
);
};
it's seem that you forget to pass onPress function to TouchOpacity
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
onPress,
...props
}) => {
return (
<TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
<Text style={[styles.text, textStyle]}>{props.title}</Text>
</TouchableOpacity>
);
};
Now It's Working
Focus.js file
import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { TextInput } from "react-native-paper";
import { RoundedButton } from "../../component/RoundedButton";
export const Focus = ({ addSubject }) => {
const [tmpItem, setTmpItem] = useState();
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<View style={styles.inputContainer}>
<TextInput
style={{ flex: 1, marginRight: 20 }}
onSubmitEditing={({ nativeEvent }) => {
setTmpItem(nativeEvent.text);
console.log("tmpItem value set " + tmpItem);
}}
/>
<RoundedButton
size={50}
title="+"
onPress={() => {
console.log("value passed!");
addSubject(tmpItem);
}}
/>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleContainer: {
flex: 0.5,
padding: 10,
justifyContent: "center",
},
title: {
color: "white",
fontWeight: "bold",
fontSize: 21,
},
inputContainer: {
paddingTop: 10,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
});
RoundedButton.js File
import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";
export const RoundedButton = ({
style = {},
textStyle = {},
size = 125,
onPress,
...props
}) => {
return (
<TouchableOpacity onPress={onPress} style={[styles(size).radius, style]}>
<Text style={[styles.text, textStyle]}>{props.title}</Text>
</TouchableOpacity>
);
};
const styles = (size) =>
StyleSheet.create({
radius: {
borderRadius: size / 2,
width: size,
height: size,
alignItems: "center",
justifyContent: "center",
borderColor: "white",
borderWidth: 2,
},
text: {
color: "white",
fontSize: size / 3,
},
});
App.js file
import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import { Focus } from "./src/features/focus/Focus";
export default function App() {
const [focusSubject, setFocusSubject] = useState();
return (
<View style={styles.container}>
{focusSubject ? (
<Text style={{ flex: 1, color: "white", fontSize: 30 }}>
Here is where I am going to build a timer
</Text>
) : (
<Focus addSubject={setFocusSubject} />
)}
<Text style={{ flex: 1, color: "white", fontSize: 30 }}>
{focusSubject}
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 50,
backgroundColor: "#252250",
},
});
I want to create a custom card in react native and it gets me confused as to use the views.
I have tried to make a card following the tutorial but I am not getting anywhere since its very confusing.The image below is what I'm trying to achieve.
This is what I have
trying to make the card
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Platform } from "react-native";
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.squareShapeView}/>
<View style={{flex:0.7}}>
<Text>Test1</Text>
<Text>Test1</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop:50,
justifyContent: 'center',
alignItems:'center',
flexDirection:'row',
borderWidth:0.3,
marginLeft:30,
marginRight:30
},
squareShapeView: {
//To make Square Shape
width:20,
height:70,
backgroundColor: '#14ff5f',
alignSelf:'flex-start'
},
});
This is what I expect to get
this is what I expect
I hope this might help you
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialIcons } from '#expo/vector-icons';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
const Card = ({ title, desc }) => (
<View style={styles.cardContainer}>
<View style={styles.cardContent}>
<View style={{ flexDirection: 'column' }}>
<Text>{title}</Text>
<Text>{desc}</Text>
</View>
<MaterialIcons name="navigate-next" size={40} color="red" />
</View>
</View>
)
export default class App extends React.Component {
constructor(props) {
super(props);
this.cards = [
{
title: 'Top up',
desc: 'Top up any number'
},
{
title: 'Top up history',
desc: 'View all of the top up you have made'
}
]
}
renderCards = () => {
return this.cards.map(card => (
<Card
title={card.title}
desc={card.desc}
/>
))
}
render() {
return (
<View style={styles.container}>
{this.renderCards()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 25,
},
cardContainer: {
paddingTop: 30,
paddingBottom: 30,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffset: { x: 0, y: 10 },
shadowOpacity: 1,
borderLeftColor: 'blue',
borderLeftWidth: 10,
alignSelf: 'stretch',
backgroundColor: 'white',
marginTop: 20,
},
cardContent: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginLeft: 20,
}
});
https://snack.expo.io/#xavier96/aGVscC
I'm trying to link the backgroundColor value in the styles container to the state: color so the background color will change to whatever color I put on the textInput. Here are my codes. Thank you!
import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
color: '',
};
_color = (text) => {this.setState({color: text})};
_applyAndClear = () => {
this.setState({color: ''})}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value = {this.state.color}
onChangeText = {this._color}
onSubmitEditing = {this._applyAndClear}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'someColor',
alignItems: 'center',
justifyContent: 'center',
},
input: {
borderWidth: 3,
width: 100,
height: 40,
borderColor: 'white',
alignItems: 'center',
justifyContent: 'center',
}
});
You could do this with the following:
<View style={[styles.container, { backgroundColor: this.state.color }]}>
I'm a newbie in React Native, and I try to learn basic flexbox from tutorial point but I always get an error, I have two file index.android.js and MyPresentationalComponent.js for styles code file.
This error picture, when I run myproject
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent from './MyPresentationalComponent';
export default class belajar extends Component {
constructor() {
super();
this.state = {
myText: 'Lorem ipsum dolor sit amet.'
};
}
render() {
return (
<View>
<MyPresentationalComponent style={styles.container} />
</View>
);
}
}
AppRegistry.registerComponent('belajar', () => belajar);
MyPresentationalComponent.js
import React, { Component } from 'react';
import {
View,
StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
return (
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
);
};
export default MyPresentationalComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
});
The problem is that you are not exporting the styles variable out of the file, and so it will not be visible to other files, even when you import the class marked with export default. I would suggest the following:
import React, { Component } from 'react';
import {
View,
StyleSheet
} from 'react-native';
const MyPresentationalComponent = (props) => {
return (
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
);
};
export default MyPresentationalComponent;
export const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
redbox: {
width: 100,
height: 100,
backgroundColor: 'red'
},
bluebox: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
blackbox: {
width: 100,
height: 100,
backgroundColor: 'black'
},
});
Then, your index.android.js should look like this:
import React, { Component } from 'react';
import {
AppRegistry,
styles,
View
} from 'react-native';
import MyPresentationalComponent, {styles} from './MyPresentationalComponent';
export default class belajar extends Component {
constructor() {
super();
this.state = {
myText: 'Lorem ipsum dolor sit amet.'
};
}
render() {
return (
<View>
<MyPresentationalComponent style={styles.container} />
</View>
);
}
}
AppRegistry.registerComponent('belajar', () => belajar);
Please note the difference between defaut exports and named exports. You can have just one default export, and the name that you give it is not relevant at all, when you import it, it can use a different name. For named imports, you need to use the curly braces notation and the name must be the same in both export and import . However, you can have as many of them as you want.
According to #Gui Herzog answer simplier solution to include any external style file can be done:
stylesheet file
import {
StyleSheet
} from 'react-native';
export default styles = StyleSheet.create({
// or export const styles = StyleSheet.create({
Container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
})
Than simply use in your components:
import styles from './styles'
// or import { styles } from './styles'
using:
<View style={styles.Container}>
The problem is because you're exporting only the component MyPresentationalComponentand not its StyleSheet. If you want to have global styles I recommend you to create a different file. You could call it Styles.js and export it so you can use on all components you need. For example:
import { StyleSheet } from 'react-native'
module.exports = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
height: 600
},
})
Then you can import it on your MyPresentationalComponent and Index.js using:
import STYLES from 'Styles.js'
And to use you could:
<Component style={STYLES.container} />
Hope this helps!