I am trying to truncate a text in my reactnative app. I've decided to use the "ellipsizeMode" attribute, but I can't get it to work.
I wrote a demo of the problem :
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export class EllipsizeModeTest extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>{'first part | '}</Text>
<Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
{'a text too long to be displayed on the screen'}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
text: {
fontSize: 20,
}
});
Now the text does not get truncated, any idea why ?
I had the same problem, it's enough to have the size of the element bound to a value. So if you define width, or add a flex value will work.
<View style={{width: 200}}><Text ellipsizeMode='tail' numberOfLines={1}></View>
You need to set a width on your Text element so it knows when to ... it
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
text: {
fontSize: 20,
width: 100
}
});
Try assigning a string to ellipsizeMode (remove the curly brackets):
<Text style={styles.text} numberOfLines={1} ellipsizeMode='tail'>
Try setting a width style property to the component
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export class EllipsizeModeTest extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>{'first part | '}</Text>
<Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
{'a text too long to be displayed on the screen'}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
text: {
fontSize: 20,
width: 100
}
});
Related
I have a problem with react-native. I'm trying exercise to do todo app from how I watch on youtube lessons. Can't understand where is my fault? Youtuber instructor codes all of same, his code working but my code doesn't working.
This is app.js file:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Task from './components/Task';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.taskWrapper}>
<Text style={styles.sectionTitle}>Today Works</Text>
<View style={styles.items}>
<Task text={'Task1'} />
<Task text={'Task2'} />
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#E8EAED',
},
taskWrapper: {
paddingTop: 80,
paddingHorizontal: 20,
},
sectionTitle: {
fontSize: 24,
fontWeight: 'bold',
},
items: {
},
});
and this is /components/Task.js file;
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TouchableOpacity } from 'react-native-web';
const Task = (props) => {
return(
<View style={styles.item}>
<View style={styles.itemLeft}>
<TouchableOpacity style={styles.square}></TouchableOpacity>
<Text style={styles.itemText}>{props.text}</Text>
</View>
<View style={styles.circular}></View>
</View>
)
}
const styles = StyleSheet.create ({
itemLeft: {
},
square: {
},
itemText: {
},
circular: {
},
});
export default Task;
That codes not working.
I got these errors in expo ;
You can see error here>
What is my fault?
You are importing TouchableOpacity from 'react-native-web' (maybe because of intellisense).
The compiler is then filling that with a <div> instead of a <View>.
Change it to just 'react-native'.
In react native I want to display some texts at some custom positions like in the following image:
custom location react native
How can I achieve this?
I've been playing with the following example:
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';
export default class TextInANest extends Component {
constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
};
}
render() {
return (
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
);
}
}
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
trying to set titleText position to absolute and adding some top and leftvalues but it doesn't seem to work.
Any ideas?
From your screenshot, we could say that :
Go to Jane's profile takes 1/11 of the screen height, and is vertically centered
Bird's Nest takes 5/11 of the screen height
This is not... takes 5/11 of the screen height
As in React Native, the main axis is the vertical one (items are positionned below each others by default), you should use justifyContent to vertically centered a Text in a View.
So something like the follow should do the trick.
<View style={{ flex: 1 }}>
<Text>Go to Jane's profile</Text>
</View>
<View style={{ flex: 5, justifyContent: "center" }}>
<Text>Bird's Nest</Text>
</View>
<View style={{ flex: 5 }}>
<Text>This is not...</Text>
</View>
Improved code with working live demo https://snack.expo.io/#akhtarvahid/demo
export default class TextInANest extends React.Component {
constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
};
}
render() {
return (
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5} style={styles.bodyText}>
{this.state.bodyText}
</Text>
</Text>
);
}
}
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold'
},
bodyText:{
position:'absolute',
left:10,
top:'50%'
}
});
I am using react-native-overlay-section. The bottom sheet is swipeable to the whole window but I want it to be swipeable to a particular height. How should I do? I have uploaded the code below:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import SlideUp from 'react-native-overlay-section';
export default class App extends Component {
constructor (props) {
super(props);
}
exampleContent = () => {
return (
<View >
<Text>This is test text</Text>
</View>
)
}
render() {
return (
<View style={{flex: 1}}>
<Text>Hello</Text>
<SlideUp
contentSection={this.exampleContent()}
draggableHeight={50}
/>
</View>
)
}
}
Here is the style:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
I'm teaching myself React Native and as of now, I've ran into a minor problem.
I want <KeyboardAvoidingView/> to push the 2 input boxes up so that the user can see what they're typing but my code isn't doing that. It isn't even showing what user is typing. The user must press Next on the keyboard they can see what they typed. Also, what I press Next, it doesn't go to the next input box.
Here's App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<View>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
backgroundColor: '#DAE5FF',
// paddingBottom: 20,
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15,
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Login/>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
});
export default BackGround;
I am testing my code and got an error. I need to press a button and go to the next page.
First, I created Safay.js and wrote code to set the initial route in this page. Then I created buttonsubmit.js so that when I press the button it will go to the next page, route.js. However, when testing I get an error. I just rechecked my code, which I may have typed wrong, or maybe it's something I don't know.
This is my error:
got error: undefined is not an object (evaluating 'this.props.navigator.push')
error in file ButtonSubmit.js :22
This is my code:
Safay.js
import index from './index.js';
import React, { Component, PropTypes } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
import Route from './Route.js';
import Signup from './Signup.js';
import ButtonSubmit from './ButtonSubmit.js';
export default class Safay extends Component {
renderScene(route, navigator){
if(route.name == 'Safay'){
return <Safay navigator={navigator}/>
}
if(route.name == 'Route'){
return <Route navigator={navigator}/>
}
}
render() {
return (
<View style={styles.container}>
{<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>}
</View>
);
}
}
ButtonSubmit.js
import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import {
StyleSheet,
TouchableOpacity,
Text,
Animated,
Easing,
Image,
Alert,
View,
} from 'react-native';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;
export default class ButtonSubmit extends Component {
navigate(routeName){
this.props.navigator.push({
name: routeName
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.navigate.bind(this, 'Route')} style={styles.button}>
<Text style={styles.text}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: -20,
alignItems: 'center',
justifyContent: 'flex-start',
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ff8011',
height: MARGIN,
borderRadius: 20,
zIndex: 100,
width: DEVICE_WIDTH - 40,
},
circle: {
height: MARGIN,
width: MARGIN,
marginTop: -MARGIN,
borderWidth: 1,
borderColor: '#ff8011',
borderRadius: 100,
alignSelf: 'center',
zIndex: 99,
backgroundColor: '#ff8011',
},
text: {
color: 'white',
fontWeight: '700',
fontSize: 21,
backgroundColor: 'transparent',
},
});
Route.js
import React, { Component } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
export default class Route extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#05121F',
},
});
Thank you for your support.
You were wrong in button class because you did not pass the instance of the navigator to the button class and you are using navigator.
If i was you i would have removed onpress from the button for a while then i would have used button in the class Safay. like this:
<View style={styles.container}>
<ButtonSubmit navigator={navigator} />
<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>
</View>
After all the above process i would have include onPress again.
Cheers :)