Develop Reference

Share image on whatsapp from react native android app

I am currently working on react-native photo sharing app for Android. Used native share method but it only share message and title. No options to share an image.
Looking after so many questions here couldn't find any straight forward way.
Please provide help.
This is the message I am getting Share awesome status on whatsapp using Khela #imageurl. Download #urltoplaystore

To share any image in React Native you are right you need to use the Share from react-native library itself, and you were wondering what is needed for an image, the answer it's really simple, you just need to use a Base64 image.
Check it out a working snack: snack.expo.io/#abrahamcalf/share-image
Wrap the code:
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Image,
Share,
TouchableOpacity,
} from 'react-native';
export default class App extends React.Component {
state = {
cat: 'data:image/jpeg;base64,some-encoded-stuff;
};
handleSharePress = () => {
Share.share({
title: 'Share',
message: 'My amazing cat 😻',
url: this.state.cat,
});
};
render() {
return (
<View style={styles.container}>
<Image source={{ uri: this.state.cat }} style={styles.img} />
<TouchableOpacity onPress={this.handleSharePress}>
<Text>Share Image</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
},
img: {
width: 200,
height: 300,
},
});
If you want to try something else, probably complex, I recommend to check out the react-native-share library from the React Native Community.

import Icon from 'react-native-vector-icons/Feather';
import Share from 'react-native-share';
import RNFetchBlob from 'rn-fetch-blob';
import React, {Component} from 'react';
const fs = RNFetchBlob.fs;
class ProductDetail extends Component {
constructor(props) {
super(props);
this.state = {};
}
shareTheProductDetails(imagesPath) {
let {productDetails} = this.state;
let imagePath = null;
RNFetchBlob.config({
fileCache: true,
})
.fetch('GET', imagesPath.image)
// the image is now dowloaded to device's storage
.then((resp) => {
// the image path you can use it directly with Image component
imagePath = resp.path();
return resp.readFile('base64');
})
.then((base64Data) => {
// here's base64 encoded image
var imageUrl = 'data:image/png;base64,' + base64Data;
let shareImage = {
title: productDetails.product_name, //string
message:
'Description ' +
productDetails.product_description +
' http://beparr.com/', //string
url: imageUrl,
// urls: [imageUrl, imageUrl], // eg.'http://img.gemejo.com/product/8c/099/cf53b3a6008136ef0882197d5f5.jpg',
};
Share.open(shareImage)
.then((res) => {
console.log(res);
})
.catch((err) => {
err && console.log(err);
});
// remove the file from storage
return fs.unlink(imagePath);
});
}
render() {
return (
<TouchableOpacity
style={{
borderWidth: 0,
left:(5),
top:(2),
}}
onPress={() =>
this.shareTheProductDetails(images)
}>
<Icon
style={{
left: moderateScale(10),
}}
name="share-2"
color={colors.colorBlack}
size={(20)}
/>
</TouchableOpacity>
)}
}

I am not able to setState in React Native

In this project I want to set the state of the userType using the data that I retrieved from the firebase db. fetching from the firebase is working correctly but I cant set the state of userType from there
I already tried
this.setState=({userType:snapshot.val()})
this.state=({userType:snapshot.val()})
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';
export default class Home extends React.Component {
constructor(props){
super(props)
this.state=({
userId:firebase.auth().currentUser.uid,
userType:'f'
})
}
componentDidMount() {
this.readUserData();
};
readUserData=()=> {
userstype= 'users/'+ this.state.userId + '/userType'
firebase.database().ref(userstype).on('value', function (snapshot) {
this.setState=({userType:snapshot.val()})
});
alert(this.state.userType)
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Home</Text>
<Text>Alpha 0.0.0.1</Text>
</View>
)}}

I've update your setState method
Try below code
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';
export default class Home extends React.Component {
constructor(props){
super(props)
this.state=({
userId:firebase.auth().currentUser.uid,
userType:'f'
})
}
componentDidMount() {
this.readUserData();
};
readUserData=()=> {
userstype= 'users/'+ this.state.userId + '/userType'
firebase.database().ref(userstype).on('value', function (snapshot) {
this.setState({userType:snapshot.val}, () => {
alert(this.state.userType)
})
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Home</Text>
<Text>Alpha 0.0.0.1</Text>
</View>
)}}
Hope this will work for you!
Thanks

(React Native) Changing order of views - bringing view to front

I'm using react-native-sketch library https://www.npmjs.com/package/react-native-sketch and I'm running into a few problems. I want to project a greyed out text and "write" on top of it, much like this.
The problem I'm having is with my current setup, I can write on the sketchview, but the text is "above" the sketchview, so I can't see any writing that's behind the textview. How can I move the text above the sketchview? Thanks!
import Sketch from 'react-native-sketch';
import React, {Component} from 'react';
import { ScrollView,StyleSheet, Text, View, TouchableHighlight } from 'react-native';
export default class App extends React.Component {
save = () => { this.sketch.save().then(({ path }) => { Alert.alert('Image saved!', path); }); };
render() {
return (
<View>
<CardView>
<View>
<Text> Draw </Text>
<View>
<Sketch
ref={sketch => { this.sketch = sketch; }}
strokeColor="black"
style = {styles.sketch}
strokeThickness={3}>
<View>
<Text> text here </Text>
</View>
</Sketch>
</View>
</View>
</CardView>
</View>
);
}
}

react native camera video feature how to record video

how do I do activate / use the video feature from https://github.com/lwansbrough/react-native-camera
Currently, I am able to take pictures but I would like to record videos instead. When I hit the Start recording text button, the app simply just crash and I have no idea how to get the error logs.
Below is the code I have written in attempt to record video
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
AppRegistry,
TouchableHighlight,
} from 'react-native';
import {StackNavigator} from 'react-navigation'
import Camera from 'react-native-camera'
export default class CameraScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Camera'
};
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
//type = {Camera.constants.Type.front}
captureMode = {Camera.constants.CaptureMode.video}
keepAwake={true}
>
<Text style={styles.capture} onPress={this.takeVid.bind(this)}> Start recording </Text>
<Text style={styles.capture} onPress={this.stopVid.bind(this)}> Stop recording </Text>
</Camera>
</View>
);
}
takeVid() {
const option = {};
//options.location = ...
this.camera.capture({
mode: Camera.constants.CaptureMode.video
})
.then((data) => console.log(data))
.catch((err) => console.error(err));
}
stopVid(){
//console.log("I am pressed");
this.camera.stopCapture();
}
}

Navigating Screens - React Native

I created a simple Android app that changes navigates when the text is pressed. The app runs properly but when I touch the text, the contents do not change and no navigation is observed. You can have a look at the error here. I have also provided the code:
import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight, View, AppRegistry} from
'react-native';
export default class SimpleNavigationApp extends Component {
constructor(props){
super(props);
this.state={
title: 'My Initial Scene',
}
}
render() {
return (
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) =>
<MyScene
title={route.title}
// Function to call when a new scene should be displayed
onForward={ () => {
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex,
});
}}
// Function to call to go back to the previous scene
onBack={() => {
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}
class dhrumil extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
onForward: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
}
render() {
return (
<View>
<Text>Current Scene: { this.props.title }</Text>
<TouchableHighlight onPress={this.props.onForward}>
<Text>Tap me to load the next scene</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>Tap me to go back</Text>
</TouchableHighlight>
</View>
)
}
}
AppRegistry.registerComponent("dhrumil",()=>dhrumil);
As you can see in the error, the title is also not displayed after the text "My Current Scene: ". How can I solve this?

First, your export default class SimpleNavigationApp is never called.
You should put it in another js file and import it to dhrumil class
.
Second,
import { Navigator } from 'react-native' is no longer supported.
Read https://facebook.github.io/react-native/docs/navigation.html for detailed navigation documentation.