I want to display an image, attributed text inside Text programmatically, but after reading React Native document I cannot find anything that related to attributed text.
In Android, it's called SpannableString, and it's equevalent to AttributedString in iOS, but I cannot find the same in React Native.
Can anyone guide me some great library/document?
Try this package react-native-spannable-string
your question is unclear but if i've gotten it correctly you want to display text on top of an image. If thats the case use Imagebackground
import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>The text you want to display</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;
Related
I have this image saved on s3:
https://deinstruct-v4.s3.us-east-2.amazonaws.com/background.png
I am trying to add it as a background image for a react native project and it keeps adding either a gradient on the top and bottom or outright darkening it as you can see in the 2 images below:
I was expecting the upscale since the image is made more for desktop than mobile, but I don't understand why it's being darkened.
My code is very simple.
import {View, ImageBackground} from 'react-native';
// styles
import {css} from './landingStyles';
const Landing = props => {
return (
<View style={css.container}>
<ImageBackground style={css.background} source={{uri: 'https://deinstruct-v4.s3.us-east-2.amazonaws.com/background.png'}}>
</ImageBackground>
</View>
)
}
export default Landing;
with landingStyles.js being:
import {StyleSheet} from 'react-native';
export const css = StyleSheet.create({
background: {
flex: 1,
resizeMode: 'stretch',
width:'100%',
},
container: {
flex: 1,
},
image: {
borderWidth: 1,
borderColor: '#FF0000',
flex: 1,
},
})
I added the border just to see where the image actual ends because with the black on the top/bottom I wasn't sure.
Please try this one. this may be issue with the. resizeMode.
import {ImageBackground, StyleSheet, View} from 'react-native';
const Landing = props => {
return (
<ImageBackground
resizeMethod={'resize'}
resizeMode={'cover'}
style={css.background}
source={{
uri: 'https://deinstruct-v4.s3.us-east-2.amazonaws.com/background.png',
}}></ImageBackground>
);
};
export default Landing;
export const css = StyleSheet.create({
background: {
flex: 1,
width: '100%',
},
container: {
flex: 1,
},
image: {
borderWidth: 1,
borderColor: '#FF0000',
flex: 1,
},
});
For some reason safeAreaView does not work in my code, Views go above the notification tab. I've tried a few things but couldn't. I tried to take the style of safeAreaView and create a view below safeAreaView that involves all the code and then in that view put that style, but it didn't work either!
import React from 'react';
import { SafeAreaView, StyleSheet, View, Image, Text } from 'react-native';
export default function Menu({ navigation }){
return <SafeAreaView style={styles.container}>
<View style={styles.profile}>
<Image source={{uri: 'https://elysator.com/wp-content/uploads/blank-profile-picture-973460_1280-e1523978675847.png'}} style={styles.imageProfile} />
<Text style={styles.name}>StackOverFlow</Text>
</View>
</SafeAreaView>
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
profile: {
flexDirection: 'row',
backgroundColor: '#EEE',
},
imageProfile: {
width: 34,
marginBottom: 5,
marginTop: 5,
borderRadius: 44/2,
marginLeft: 10,
height: 34
},
name: {
alignSelf: 'center',
marginLeft: 10,
fontSize: 16
}
});
According to react-native docs:
The purpose of SafeAreaView is to render content within the safe area
boundaries of a device. It is currently only applicable to iOS devices
with iOS version 11 or later.
I would advise you to not just follow safeAreaView functionalities. rather its better extract the Status bar height and give a marginTop to whole container so its always below the status bar. See the code below and also the working expo snack solution:
import React from 'react';
import { SafeAreaView, StyleSheet, View, Image, Text,StatusBar } from 'react-native';
export default function Menu({ navigation }){
return <SafeAreaView style={styles.container}>
<View style={styles.profile}>
<Image source={{uri: 'https://elysator.com/wp-content/uploads/blank-profile-picture-973460_1280-e1523978675847.png'}} style={styles.imageProfile} />
<Text style={styles.name}>StackOverFlow</Text>
</View>
</SafeAreaView>
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:StatusBar.currentHeight
},
profile: {
flexDirection: 'row',
backgroundColor: '#EEE',
},
imageProfile: {
width: 34,
marginBottom: 5,
marginTop: 5,
borderRadius: 44/2,
marginLeft: 10,
height: 34
},
name: {
alignSelf: 'center',
marginLeft: 10,
fontSize: 16
}
});
Expo link :expo-snack
Hope it helps. feel free for doubts
The SafeAreaView from 'react-native-safe-area-context' just worked for me.
The react-native version doesn't work on Android or early iOS versions.
Specifically you want to use:
import { SafeAreaView } from 'react-native-safe-area-context'
and not
import { SafeAreaView } from 'react-native'
If you're not already using react-native-safe-area-context then you might want to read the documentation as it also requires that you use the SafeAreaProvider component at a higher level in your app.
Try "resizeMode" in imageview
enum('cover', 'contain', 'stretch', 'repeat', 'center')
https://facebook.github.io/react-native/docs/image#resizemode
None of these work for me ,
so i try this and it solve the problem.
First: Import SafeAreaProvider from react-native-safe-area-context as shown below.
import { SafeAreaProvider} from 'react-native-safe-area-context';
Second : give marginTop to it, in my case is was 13%, adjust according to your needs, as shown below .
<SafeAreaProvider style={{marginTop:"13%"}} >
<Home/>
...
<SafeAreaProvider/>
Let me know if this was helpful.
I'm new to react native, I am trying to get a menu composed of logos that someone could just scroll down then tap one to go into more detail about it.
So I have my App.js file like so:
import React from 'react';
import {
StyleSheet,
View,
Image,
ScrollView,
Text
} from 'react-native';
import getImageForRestaurant from './utils/getImageForRestaurant';
import Avatar from './components/Avatar';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
restaurants: 'buffalo',
};
}
render() {
const {
restaurants
} = this.state;
return (
<View style={styles.appContainer}>
<View style={styles.titleContainer}>
<Text style={styles.title}>Title</Text>
</View>
<ScrollView style={styles.timerlist}>
<Avatar
initials="KC"
size={75}
source={getImageForRestaurant(restaurants)}
backgroundColor={'blue'}
onPressLinkImage={() => {
console.log('Pressed!');
}}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
appContainer: {
flex: 1,
justifyContent: 'center',
},
titleContainer: {
paddingTop: 35,
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: '#D6D7DA',
},
title: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
timerList: {
paddingBottom: 15,
},
container: {
flex: 1,
backgroundColor: '#34495E',
},
imageContainer: {
flex: 0,
},
image: {
flex: 1,
width: 75,
height: 75,
resizeMode: 'contain',
},
});
The getImageForRestaurant() method works as intended if I make it inside an <Image/> but if I try to make it the source of my "Avatar" component then it won't work.
My getImageForRestaurant.js file is just this:
const images = {
buffalo1: require('../assets/restaurants/logo1.jpeg'),
buffalo: require('../assets/restaurants/logo2.png'),
buffalo2: require('../assets/restaurants/logo3.jpeg'),
};
export default restaurants => images[restaurants];
And finally my Avatar.js is as follows:
import {
ColorPropType,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';
import getImageForRestaurant from '../utils/getImageForRestaurant';
export default function Avatar({
size,
backgroundColor,
initials,
source,
onPressLinkImage,
}) {
const style = {
width: size,
height: size,
borderRadius: size / 2,
backgroundColor,
};
return (
<View style={[styles.container, style]}>
<TouchableOpacity onPress={onPressLinkImage}>
<Text style={styles.text}>{initials}</Text>
<Image source={require(getImageForRestaurant(source))} />
{/*<Image source={require("../assets/restaurants/logo1.jpeg")} />*/}
</TouchableOpacity>
</View>
);
}
Avatar.propTypes = {
initials: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
source: PropTypes.number.isRequired,
backgroundColor: ColorPropType.isRequired,
onPressLinkImage: PropTypes.func.isRequired,
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: 'white',
},
});
So if I just do an Image source, (the commented part) it works as a regular image, but then I need to hard-code the actual url and what I want is to just load all images one next to the other in a scrollable grid. Haven't been able to figure out how to do what I want. Could someone please point me in the right direction?
While Edison makes a good point about good practices, I believe your problem is that you are just requiring the image twice. The output of the require() is what you need to pass to the Image component. You are doing require of a require.
<Image source={require(getImageForRestaurant(source))} />
Probably just changing to this should work:
<Image source={getImageForRestaurant(source)} />
It’s a bad practice to generate url inside the source prop. Always make sure that the necessary URL is built before its passed inside source prop. You can use a variable to build your URL and then pass it to source prop. (In your case, image is imported inside helper function and hence I will use image variable)
const image = getImageforRestaurant(source)
<Image source={image} />
When you want to load images from the internet do it like this.
const link = ‘http://example.com/image.png’
<Image source={{uri: link}} />
I have made a button as:
<-Button onPress={() => Linking.openURL(props.albumName.url)} /->
upon pressing the button, the app isnt getting redirected to a new browser window. I checked it in the AVD as well as on my Android phone. The parameter props.albumName.url == https://www.amazon.com/Evolve-Imagine-Dragons/dp/B07143J5MM/. Other properties such as props.albumName.title, props.albumName.artist etc are being displayed correctly so nothing wrong with the syntax, I also tried logging props.albumName.url out to confirm that it contains the given url in the correct format
I guess you are missing title property in button tag, it's a required props.
I have tried the same code, it works great.
Here is my code
import React, { Component } from 'react';
import {
View,
Linking,
Button
} from 'react-native';
export default class Button1 extends Component {
render() {
return(
<View>
<Button
title="click"
onPress={() => Linking.openURL(this.props.albumName)}/>
</View>
);
}
}
And am using that component here
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Button1 from './Button';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>`enter code here`
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Button1 albumName = 'https://www.amazon.com/Evolve-Imagine-
Dragons/dp/B07143J5MM/' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
I want to be able to send a SMS from a react native application natively withou open the actually sms application on ios or android. Does anyone know of any was of making this happen without without using a API such as twilio or Nexmo?
You can use this package react-native-sms-android
But it only works for Android.
You can use the react-native-sms-x package.
You just need to add this project in setting.gradle and build.gradle files. then the below code
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import SendSMS from 'react-native-sms-x';
export default class RNSMS extends Component {
sendSMSFunction() {
SendSMS.send(123, "+95912345678", "Hey.., this is me!\nGood to see you. Have a nice day.",
(msg)=>{
ToastAndroid.show(msg, ToastAndroid.SHORT);
}
);
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={this.sendSMSFunction.bind(this)}>
<Text>Send SMS</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
padding: 10,
borderWidth: .5,
borderColor: '#bbb',
margin: 10,
alignItems: 'center',
justifyContent: 'center'
}
});
AppRegistry.registerComponent('RNSMS', () => RNSMS);
For more info refer https://www.npmjs.com/package/react-native-sms-x