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
Related
This is my first expo code which I am able to run successfully:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<WebView
style={{ marginTop: 0 }}
source={{ uri: 'https://baldeaglemall.com/' }}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
But I am unable to add a splash screen with 10 seconds time to it for display. Chasing google search is not leading me anywhere. What modifications do I need to do my code above?
Edit:
Splash screen works based on examples in expo documentation.
But the below answer causes a white screen right after the splash screen and it stays at white screen and never goes in the webview.
You could use SplashScreen.preventAutoHideAsync() (provided by expo-splash-screen) to make the native splash screen stay visible until SplashScreen.hideAsync() is called.
Add the package to your dependencies
$ expo install expo-splash-screen
And then, use it like this:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen'; // <-- import it
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';
// Prevent native splash screen from autohiding before App component declaration
SplashScreen.preventAutoHideAsync()
.then((result) => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
.catch(console.warn); // it's good to explicitly catch and inspect any error
export default function App() {
React.useEffect(() => {
setTimeout(async () => {
await SplashScreen.hideAsync();
}, 5000); // <-- Set this to `5000` ms to hide it after 5 seconds
}, []);
return (
<WebView
style={{ marginTop: 0 }}
source={{ uri: 'https://baldeaglemall.com/' }}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Disclaimer: I haven't tested this code, but it should work
I wanna set the activity indicator while calling the api so that the user can't do anything, the problem is when I call the api, the activity indicator doesn't include the header(using react-navigation), so while calling the api, the user is able to go back to previous screen, according to this, unexpected error is occurred.
Here are the code:
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
const Screen1 = () => {
const [isLoading, setLoading] = useState(false);
useEffect(() => {
const fn = async () => {
setLoading(true);
const apiRes = await fetch(...);
setLoading(false);
};
fn();
}, []);
const renderIndicator = () => {
return (
<View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<>
<View style={{ flex: 1, backgroundColor: 'orange' }}>
{...}
</View>
{isLoading && renderIndicator()}
</>
);
}
export default Screen1;
Here the main problem is <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}> doesn't contain the header(react-navigation) container. I wanna the activity Indicator contains the header bar.
I can hide the standard header container and use custom header. but the requirement is to use standard header, not custom header.
I have a very simple solution for your problem is to use "Modal" Just make a component called Loader or whatever you want to name it and paste this code in it
I have used react-native-indicators but you can use react-native's ActivityIndicator if you want
Loader.js
import React, {Component} from 'react';
import {
Text,
View,
Modal,
SafeAreaView,
Alert,
ActivityIndicator,
} from 'react-native';
import {SkypeIndicator} from 'react-native-indicators';
import styles from './styles';
import {Colors} from '../../Themes';
export default class Loader extends Component {
state = {
};
render() {
return (
<Modal
animationType="none"
transparent={true}
visible={this.props.visible}>
<SafeAreaView
style={{
...styles.container,
backgroundColor:
this.props.type === 'invisible'
? `rgba(255,255,255,${1})`
: `rgba(0,0,0,${this.props.transparancy})`,
...this.props.customStyle,
}}>
<SkypeIndicator size={50} color={Colors.primary} />
</SafeAreaView>
</Modal>
);
}
}
Styles.js
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Just import it wherever you wanna use it and use it this way
import Loader from '../../Components/Loader';
Put the <Loader/> before the last closing tag in the component
<Loader visible={this.props.signin.fetching} transparancy={0.7}/>
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 am just importing my files from a custom created folder component to App.js file and import key in not working on manually created files while working on other imports on React and React native.
I am making an application of React-Native using Expo CliCode Image
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import test from './component/test'; // This line is producing error
export default function App() {
return (
<View style={styles.container}>
<test/>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({`enter code here`
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
TEST COMPONENT :----
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Test extends React.Component {
render(){
return (
<View style={styles.container}>
<Text>Login js file</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
PLEASE VISIT CODE IMAGE line 3 is causing error
https://i.stack.imgur.com/WRYAt.png
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,
},
});