New React-Native installation. I am trying to set it up. In index.ios.js, I have:
class thingy extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={(
title: 'Thingy',
component: Main
)} />
);
}
}
When I run this, the app gives me the error:
Can't find variable: title
I'm not sure why it's giving me this error. Any ideas?
Main Component:
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
var styles = StyleSheet.create({
mainContainer: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center',
color: '#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
bordderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
bordeRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
});
class Main extends React.Component{
render(){
return (
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
module.exports = Main;
Ah, it looks like initialRoute should be an object, but you have it wrapped in parenthesis:
How it is now:
initialRoute={(
title: 'Thingy',
component: Main
)}
Should actually be:
initialRoute={{
title: 'Thingy',
component: Main
}}
Related
I'm trying to add a tap gesture to the render card of react-native-deck-swiper using the TapGestureHanlder from react-native-reanimated.
Currently, it works when tapping the red zone outside the swiper, but I want to tap the picture and get the x position where I tapped.
This is the code of the red zone, there I'm calling a class component in which I'm using the deck-swiper with some extra functions.
const onSingleTapEvent = (event) => {
if (event.nativeEvent.state === State.ACTIVE) {
alert('Hey single tap!');
}
};
return (
<GestureHandlerRootView style={{ zIndex: 10 }}>
<TapGestureHandler onHandlerStateChange={onSingleTapEvent}>
<AnimatedView style={styles.container}>
<ImageSwiperDeck
index={index}
listOfAssetsWithinTheAlbum={listOfAssetsWithinTheAlbum}
moveImageToTrashBin={moveImageToTrashBin}
keepImageInAlbum={keepImageInAlbum}
/>
</AnimatedView>
</TapGestureHandler>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: {
height: 560,
width: 500,
zIndex: 10,
backgroundColor: 'red',
},
});
export default ImageSwiper;
This is the deck-swiper code which works fine.
return (
<Swiper
ref={(swiper) => {
this.swiper = swiper;
}}
cards={this.props.listOfAssetsWithinTheAlbum}
cardIndex={this.props.index}
renderCard={this.Card}
backgroundColor={'transparent'}
onSwipedLeft={this.deleteImage}
onSwipedRight={this.keepImage}
cardVerticalMargin={10}
stackSize={5}
stackScale={20}
stackSeparation={5}
animateOverlayLabelsOpacity
animateCardOpacity
disableTopSwipe
disableBottomSwipe
overlayLabels={{
left: {
title: 'DELETE',
style: {
label: {
backgroundColor: colors.red,
borderColor: colors.red,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: -20,
},
},
},
right: {
title: 'KEEP',
style: {
label: {
backgroundColor: colors.blue,
borderColor: colors.blue,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: 20,
},
},
},
}}
/>
);
I am new to react-native. I would like to kee the style in a separate component to keep my components clean. But, if I do that, the style not longer gets applied. What is the reason for that. Would you be able to find what I am doing wrong?
Here is my code
import styles from "./name.style.js";
<View>
<Text style={styles.today}>Today</Text>
<Text style={styles.date}>21.2.2022</Text>
<View style={styles.itemsContainer}>
<Text style={styles.total}>Total : {totalPrice}</Text>
{renderItemsList}
<TouchableOpacity onPress={() => navigation.navigate("New")}>
<Text style={styles.addNew}>Add New</Text>
</TouchableOpacity>
</View>
</View>
name.style.js
import { StyleSheet } from "react-native-web";
export default StyleSheet.create({
today: {
fontSize: 46,
textAlign: "center",
},
date: {
textAlign: "center",
fontSize: 24,
marginTop: 20,
},
itemsContainer: {
marginLeft: "auto",
marginRight: "auto",
width: "80%",
marginTop: 30,
},
total: {
fontSize: 30,
textAlign: "center",
fontFamily: "Montserrat-Bold",
marginVertical: 10,
},
addNew: {
backgroundColor: "green",
marginTop: 15,
alignItems: "center",
justifyContent: "center",
height: 50,
width: 120,
padding: 10,
color: "white",
textAlign: "center",
fontSize: 22,
marginLeft: "auto",
marginRight: "auto",
},
});
There is an invalid import statement.
import { StyleSheet } from "react-native-web"; // Bad!
import { StyleSheet } from "react-native"; // Good!
I'm having some troubles displaying information which I believe they have to do with the Flexbox Properties, but no matter how I play around with the Styles I don't get to fit everything in some components.
First I have this Component which is a Simple Card Component where I pass my data from API:
<PartidoItem
localImage={logoLocal}
marcadorLocal={marcadorLocal}
time={date}
partidoId={partidoId}
estatus={estatus}
minute={elapsed}
estadio={estadio}
marcadorVisita={marcadorVisita}
visitImage={logoVisita}
onSelect={estatus !== 'NS' && estatus !== 'TBD' ? () => {
selectPartidoHandler(partidoId, tituloPartido)
}
: () => { }
}
/>
This comes from this Component:
import React from 'react';
import { View, Text, Image, StyleSheet, TouchableNativeFeedback, TouchableOpacity, Platform } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const PartidoItem = props => {
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.localImage }}
/>
</View>
</View>
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorLocal}</Text>
</View>
{props.estatus === 'NS' || props.estatus === 'TBD'
? <View style={styles.column}>
<Text style={styles.date}>{props.time}</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
: props.estatus === 'FT' ?
<View style={styles.column}>
<Text style={styles.title2}>Final</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
:
<View style={styles.column}>
<Text style={styles.title}>Tiempo:</Text>
<Text style={styles.title}>{props.minute} '</Text>
</View>
}
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorVisita}</Text>
</View>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.visitImage }}
/>
</View>
</View>
</View>
</TouchableCmp>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 100,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '20%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: '100%',
height: '70%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
export default PartidoItem;
Which Holds this Component as well:
import React from 'react';
import { View, StyleSheet } from 'react-native';
//Importacion de los colores
import Colors from "../../constants/Colors";
const Card = props => {
return (
<View style={{...styles.card, ...props.style}}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: Colors.background,
}
});
export default Card;
Now the problem is that when I see it in the Android Emulator and it has large Strings I see this:
As you can see the Component is the one in the Primary Box and the Property "Estadio" is too big that doesn't show completely
The same happens when I check this on my iOS device (through Expo):
Is there a way to get this info to fit into that space so it shows the Full Name?
Kind Regards
PD: After Change Advise on first Answer this is the result with the Logos not showing correctly:
Try this for your styles :
const styles = StyleSheet.create({
product: {
height: 120,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: 100,
height: 100,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
margin: 5,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
I have another problem with a button. I have to position it inside a ListView under the last item.
Here are the classes I used:
Notes.js:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
export default class Note extends Component {
render() {
return (
<View key={this.props.keyval} style={styles.note}>
<Text style={styles.noteText}>{this.props.val.date}</Text>
<Text style={styles.noteText}>{this.props.val.note}</Text>
<TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
<Text style={styles.noteDeleteText}>Del</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
note: {
position: 'relative',
padding: 20,
paddingRight: 100,
borderBottomWidth:2,
borderBottomColor: '#ededed'
},
noteText: {
paddingLeft: 20,
borderLeftWidth: 10,
borderLeftColor: '#0000FF'
},
noteDelete: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2980b9',
padding: 10,
top: 10,
bottom: 10,
right: 10
},
noteDeleteText: {
color: 'white'
}
});
This is the component that I use every time when I want to create a note.
Main.js:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import Note from './Note';
export default class Main extends Component {
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: '',
};
this.getSavedNotes(this.state.noteArray);
}
render() {
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote(key)}/>
});
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>- NOTER -</Text>
</View>
<ScrollView style={styles.scrollContainer}>
{notes}
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.textInput}
placeholder='Write your note here'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='white'
underlineColorAndroid='transparent'>
</TextInput>
</View>
</View>
);
}
addNote(){
if(this.state.noteText){
var d = new Date();
this.state.noteArray.push({
'date':d.getFullYear()+
"/"+(d.getMonth()+1) +
"/"+ d.getDate(),
'note': this.state.noteText
});
this.setState({ noteArray: this.state.noteArray });
this.setState({noteText:''});
AsyncStorage.setItem('arr', JSON.stringify(this.state.noteArray));
alert(this.state.noteArray);
}
}
deleteNote(key){
this.state.noteArray.splice(key, 1);
this.setState({noteArray: this.state.noteArray});
}
getSavedNotes = async (noteArray) =>{
try{
let data = await AsyncStorage.getItem('arr');
if(JSON.parse(data))
{
this.state.noteArray = JSON.parse(data);v
}
}catch(error){
alert(error);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
backgroundColor: '#1A237E',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 10,
borderBottomColor: '#ddd'
},
headerText: {
color: 'white',
fontSize: 18,
padding: 26
},
scrollContainer: {
flex: 1,
marginBottom: 100
},
footer: {
position: 'absolute',
bottom: 0,
backgroundColor: '#000000',
left: 0,
right: 70,
zIndex: 10
},
textInput: {
alignSelf: 'stretch',
color: '#fff',
padding: 20,
backgroundColor: '#252525',
borderTopWidth:2,
borderTopColor: '#ededed'
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 0,
bottom: 0,
backgroundColor: '#1A237E',
width: 70,
height: 68,
// borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 24
}
});
Here is where I save the notes and display them inside the ListView. After the insertion, the button should appear under the new added note.
Finally the App.js:
import React, { Component } from 'react';
import Main from './app/components/Main.js';
export default class App extends Component {
render() {
return (
<Main/>
);
}
}
Here I just display the Main.js component.
I made it! Here are the changes I made in Main.js file:
<ScrollView style={styles.scrollViewContainer}>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</ScrollView>
And here is the designSheet:
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
backgroundColor: '#1A237E',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 10,
borderBottomColor: '#ddd',
},
headerText: {
color: 'white',
fontSize: 18,
padding: 26
},
scrollContainer: {
flex: 1,
},
footer: {
position: 'absolute',
bottom: 0,
height: 70,
backgroundColor: '#000000',
left: 0,
right:0,
zIndex: 10,
},
textInput: {
alignSelf: 'stretch',
color: '#fff',
padding: 20,
backgroundColor: '#252525',
borderTopWidth:2,
borderTopColor: '#ededed',
marginRight: 70,
},
addButton: {
position: 'relative',
zIndex: 11,
left: 0,
top: 0,
backgroundColor: '#1A237E',
width: 70,
height: 70,
alignItems: 'center',
justifyContent: 'center',
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 60
},
scrollViewContainer: {
flex: 1,
marginBottom: 70,
}
});
I hope this help others aswell
I just started with react-native and was building this sample application:
xcode version: 6.2
OS : OS X 10.9.5
node version: 0.10.28
index.ios.js
var React = require('react-native');
var Main = require('./App/Components/Main');
var {
AppRegistry,
StyleSheet,
Text,
NavigatorIOS,
View,
} = React;
var styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor: '#111111'
},
});
class githubNotetaker extends React.Component{
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Github NoteTaker',
component: Main
}} />
);
}
};
AppRegistry.registerComponent('githubNotetaker', () => githubNotetaker);
Main.js
var React = require('react-native');
var {
View,
Text,
StyleSheet
} = React;
var styles = StyleSheet.create({
mainContainer: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#48BBEC'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center',
color: '#fff'
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
});
class Main extends React.Component{
render() {
return(
<View style={styles.mainContainer}>
<Text> Testing the Router </Text>
</View>
)
}
};
module.exports = Main;
Error
I getting clueless why it is not able to location Main.js module.
Well,
The issue was little different.
In my file index.io.js I named my class as githubNotetaker while the project directory name was githubNoteTaker. I changed my class name to githubNoteTaker.
One more thing to add, also my tutorial didn't mention, I had to start npm serve using command npm start. I did that and application worked like a charm