Develop Reference

I have added a picture on bottom. Now my keyboard is not opening

I have added a picture on the bottom of the mobile screen with style as:
bottomView: {
position: 'absolute',
bottom: 0,
},
Above this picture, I have my sign-in form, but because the picture is at the absolute position, it is not letting the keyboard open. I don't want to make this picture relative as it will disturb the picture. Can anyone help me in such a way that I want to keep the picture on the bottom too but want to open the keyboard as well.
Complete code is:
import React from "react";
import { Image, StyleSheet, Text, View ,TextInput,KeyboardAvoidingView} from "react-native";
import Authentication_Button from "./Authentication_Button";
import { SocialIcon } from 'react-native-elements'
const Login = () => {
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
return(
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container} enabled>
{/* <View style={styles.container}> */}
<Image source={require('./assets/Logo.png')} style={styles.logo}/>
<TextInput
label="Email"
value={email}
onChangeText={email => setEmail(email)}
style={styles.TXT_INPUT}
placeholder="Email"
/>
<TextInput
label="Password"
value={password}
onChangeText={password => setPassword(password)}
style={styles.TXT_INPUT}
placeholder="Password"
/>
<View style={styles.auth}>
<Authentication_Button title={"Login"} backGroundColor={"#2c88d1"} textColor = {"#FFFFFF"} borderColor={"#2c88d1"}/>
<Authentication_Button title={"Signup"} backGroundColor={"#FFFFFF"} textColor = {"#2c88d1"} borderColor={"#2c88d1"}/>
</View>
<Text>- OR -</Text>
<Text>Sign in with </Text>
<SocialIcon
raised={true}
type='google'
style={{backgroundColor:"#2c88d1"}}
/>
<KeyboardAvoidingView style={styles.bottomView}>
<Image source={require('./assets/footLogin.png')} />
</KeyboardAvoidingView>
{/* </View> */}
</KeyboardAvoidingView>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:"#effdfe",
justifyContent:"center",
alignItems:"center",
padding:20
},
logo :{
width:150,
height:150,
resizeMode:'cover'
},
TXT_INPUT:{
marginBottom:10,
marginTop:10,
borderRadius:12,
borderWidth:1.4,
width:"85%",
paddingVertical:14,
backgroundColor:"#ffffff",
color:"#000000",
fontSize:18
},
auth:{
marginTop:10,
marginBottom:10,
width:"85%",
},
bottomView: {
marginTop:'5%',
position: 'absolute', //Here is the trick
bottom: 1, //Here is the trick
},
});
export default Login;

You can use KeyboardAvoidingView as a parent view. It will help you either your internal button or view is an absolute position
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container}
>
</KeyboardAvoidingView>

So the issue has been resolved. The issue was that the footer image was basically on top ofthe text input fields so as soon I changed the positions, it started to work!

How to make an autoplay inline video to fullscreen on landscape RN (IOS & Android)

I make a project with React Native for both platforms (Android & IOS) that in the first page and the pages of posts are videos who playing automatic.This video sometimes is youtube and sometimes m3u8.
On portrait orientation i want to play inline with some content beneath and on landscape i want to play fullscreen.
I use react-native-android-fullscreen-webview-video for manipulate WebView component and for Android it works. But as the name says it works only for android. I wants the similar behaviour for IOS too.
I try react-native-af-video-player but when i setup the dependency react-native-orientation the video stuck in fullscreen mode. Also the react-native-af-video-player is for mp4 only player.
if(livestream.type === 'youtube' && Platform.OS === 'android') {
the_live_video = (
<WebView
style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
javaScriptEnabled
source={{
uri: livestream.url
}}
/>
)
} else if(livestream.type === 'youtube' && Platform.OS === 'ios') {
the_live_video = (
<WebView
style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
javaScriptEnabled
source={{
uri: livestream.url
}}
/>
)
} else if(livestream.type === 'jwplayer' && Platform.OS === 'android') {
the_live_video = (
<WebView
style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
javaScriptEnabled
source={{
uri: livestream.url
}}
/>
)
} else if(livestream.type === 'jwplayer' && Platform.OS === 'ios') {
const video = {
html: `<video width="${VIDEO_WIDTH}" height="${VIDEO_HEIGHT}" controls src="${
livestream.url
}"></video>`
};
the_live_video = (
<WebView
style={{ width: VIDEO_WIDTH, height: VIDEO_HEIGHT, alignSelf: 'stretch' }}
javaScriptEnabled
source={video}
/>
)
}
As i said i want the behaviour of react-native-android-fullscreen-webview-video for IOS platform too.

react-native-af-video-player is no longer maintained as a result it is causing a lot of trouble you can use react-native-af-video-player-updated package in place.

Cannot Render Image from API

I have created my own website and api which is (https://lkcfesnotification.000webhostapp.com) i already upload the image and can view as (http://lkcfesnotification.000webhostapp.com/storage/notifications/August2019/c1nsEktOjtSloxEtnL4d.jpg). And my api for this id is (http://lkcfesnotification.000webhostapp.com/api/notifications/33). But when i try to fetch the api i can display all my text but not my image and hyperlink to download file. How to solve this issue
I try to use this but still no luck
{{ uri: member.image }}
<Image
value={member ? member.image : ''}
source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + member}}
style={{width: 60, height: 60}}
/>
I expected to get my my image and my file using hyperink to download through google browser
import React, { Component } from 'react';
import {
Alert,
Image,
StyleSheet,
ScrollView,
View,
Text,
} from 'react-native';
import {
InputWithLabel
} from './UI';
import { FloatingAction } from 'react-native-floating-action';
type Props = {};
export default class ShowScreen extends Component<Props> {
static navigationOptions = ({navigation}) => {
return {
title: navigation.getParam('headerTitle')
};
};
constructor(props) {
super(props)
this.state = {
id: this.props.navigation.getParam('id'),
member: [],
};
this._load = this._load.bind(this);
}
componentDidMount() {
this._load();
}
_load() {
let url = 'http://lkcfesnotification.000webhostapp.com/api/notifications/' + this.state.id;
fetch(url)
.then((response) => {
if(!response.ok) {
Alert.alert('Error', response.status.toString());
throw Error('Error ' + response.status);
}
return response.json()
})
.then((member) => {
this.setState({member});
})
.catch((error) => {
console.error(error);
});
}
render() {
let member = this.state.member;
// let af = 'http://lkcfesnotification.000webhostapp.com/storage/';
console.log(member);
console.log(member.image);
//let image = JSON.parse(member.image)
return (
<View style={styles.container}>
<ScrollView>
<InputWithLabel style={styles.output}
label={'Title'}
value={member ? member.title : ''}
orientation={'vertical'}
editable={false}
/>
<InputWithLabel style={styles.output}
label={'Department'}
value={member ? member.department : ''}
orientation={'vertical'}
editable={false}
/>
<InputWithLabel style={styles.output}
label={'Publish'}
value={member ? member.updated_at : ''}
orientation={'vertical'}
editable={false}
/>
<InputWithLabel style={[styles.output, {height: 800, textAlignVertical: 'top'}]}
label={'Description'}
value={member ? member.description : ''}
orientation={'vertical'}
editable={false}
multiline={true}
/>
<Image
value={member ? member.image : ''}
source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + this.state.member.image[0]}}
style={{width: 60, height: 60}}
/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
},
output: {
fontSize: 24,
color: '#000099',
marginTop: 10,
marginBottom: 10,
},
});

You are getting array of image in member object. Which is also stringified version, you need to parse it to use further.
You can try this.
render() {
let member = this.state.member;
let af = 'http://lkcfesnotification.000webhostapp.com/storage/';
let image = member && JSON.parse(member.image) //parse your array first
return (
<View style={styles.container}>
<ScrollView>
...
<Image
source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + image[0]}}
style={{width: 60, height: 60}}
/>
</ScrollView>
</View>
Update
Demo
Tested with below JSON directly, because we are getting CORS error while accessing your URL.
{"id":33,"title":"UTAR (Sungai Long Campus) Career Day","description":"<p style=\"margin: 0px 0px 6px; font-family: Helvetica, Arial, sans-serif; color: #1c1e21;\">DARP s organizing UTAR (Sungai Long Campus) Career Day and the details are as follows:-<\/p>\r\n<p> <\/p>\r\n<p style=\"margin: 6px 0px 0px; display: inline; font-family: Helvetica, Arial, sans-serif; color: #1c1e21;\">Date: 1 August 2019 (Thursday)<br \/>Time: 10.00am - 4.00pm<br \/>Venue: Multipurpose Hall (KB Block), Sungai Long Campus<\/p>","image":"[\"notifications\\\/August2019\\\/c1nsEktOjtSloxEtnL4d.jpg\",\"notifications\\\/August2019\\\/WKka4FvUxFyNQpGQHSo8.jpg\",\"notifications\\\/August2019\\\/KWKZ4XnlkjlK7vHEdHln.jpg\",\"notifications\\\/August2019\\\/eNDFFu4hFHFMBEsR94DV.jpg\",\"notifications\\\/August2019\\\/IWH0eg3IpG59qapIoHj3.jpg\"]","attachment":"[{\"download_link\":\"notifications\\\/August2019\\\/SXMtnNb31ndgDnCWNC57.txt\",\"original_name\":\"dsadasdsa.txt\"},{\"download_link\":\"notifications\\\/August2019\\\/CDEZG6tJhrbVuxlfMiBb.txt\",\"original_name\":\"fyprefereance.txt\"}]","department":"D3E","link":null,"created_at":"2019-08-03 03:52:11","updated_at":"2019-08-03 03:52:11","deleted_at":null}
You can check the console.log, how the member.parse gives correct array of image.
Update 2
You can loop over image to get all the images.
{image && image.length && image.map(image => {
return <Image
source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + image}}
style={{width: 60, height: 60}}
/>
})
}

The below would give you some idea on the issue. ( I haven't added complete working code but a code which gives you some idea on the issue)
After seeing your api response, I see that image is an array rather than just an object.
Moreover it's a string which you need to convert to a JSON object.
JSON.parse method can help you with converting your string to JSON object.
From your API, image is an array. Notice the [] which means your image is an array.
This means you either want to display an array of images or just a single image.
If you want all the images to be displayed, iterate through member.image and display it.
If you want to display only single image give below a try
Declare a variable in your render method and use it for your image. (Make sure your member object is not defined before using it
let memberImages = JSON.parse(member.image);
{ memberImages && memberImages[0] &&
<Image
value={member ? member.image : ''}
source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + member.image[0]}}
style={{width: 60, height: 60}}
/>
}

React-Native, Pdf showing on android simulator but getting error on actual android device

I have installed react-native-pdf and rn-fetch-blob packages to show pdf file.It work's fine on simulator but for some reason i am getting "Error: open failed: ENOENT (No such file or directory)".
Here is my code below:
import React, { Component } from 'react';
import {
StyleSheet,
Dimensions,
View
} from 'react-native';
import Pdf from 'react-native-pdf';
// Screen that shows the contents of a PDF
export default class OpenPdf extends Component {
static navigationOptions = {
title: 'Product Variants'
};
render() {
const source = require('../assets/Product_Variants_Electric_Connections.pdf');
return (
<View style={{width: '100%', height: '100%'}}>
<Pdf style={styles.pdf}
source={source}
onLoadComplete={(numberOfPages, filePath) => {
alert(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
alert(`current page: ${page}`);
}}
onError={(error) => {
alert(`error`+error);
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
pdf: {
flex: 1,
width: Dimensions.get('window').width
}
});
I have already went through many links, none of the issue is similar to mine.
Kindly please suggest what am I missing.

As suggested by #Hardik Virani above in comment, I have removed local url and did like below:
render() {
const source = {uri:'bundle-assets://Product_Variants_Electric_Connections.pdf', cache: true};
return (
<View style={{width: '100%', height: '100%'}}>
<Pdf style={styles.pdf}
source={source}
/>
</View>
);
And Remember Just put your actual pdf in the android/app/src/main/assets/pdf folder of your project.

Image cannot go full-width in react-native

I want to make a screen with a full-width Android screen image, but however, for some reason I cannot do it. I have done every single solution available in SO but it still persists.
Here is my code:
<View style={styles.loginContainer}>
<Image
style={styles.background}
source={require('./image.png')}
//source={{uri: 'http://previews.123rf.com/images/background.jpg'}}
opacity={0.8}
>
<Login navigator={navigator} />
</Image>
</View>
and my Stylesheet:
var styles = StyleSheet.create({
loginContainer: {
alignSelf: 'stretch',
flex: 1,
alignItems: 'stretch'
},
background: {
alignSelf: 'stretch',
flex: 1,
alignItems: 'stretch'
},
});
For some reason it worked just fine when I used network images, but when I used static images, it will only cover 2/3 width but full height. I have also tried source={{uri: 'image.png', isStatic: true}}, but it gives me null error. Any solution is much appreciated. Thanks.

Yes, there is an open issue on Github.
First of all, I would suggest using the resizeMode property, for instance:
<Image
style={styles.background}
source={require('./image.png')}
opacity={0.8}
resizeMode="contain"
>
Then, for network images, this would work:
var styles = StyleSheet.create({
loginContainer: {
flex: 1,
},
background: {
flex: 1,
},
});
For 'required' images, it does not work, as you pointed out, so you can either specify the width yourself:
var width = require('Dimensions').get('window').width;
var styles = StyleSheet.create({
loginContainer: {
flex: 1,
},
background: {
flex: 1,
width: width,
},
});
Or even set it to null:
var styles = StyleSheet.create({
loginContainer: {
flex: 1,
},
background: {
flex: 1,
width: null,
},
});

You can use react-native-scalable-image. The following example will give you a full screen width image:
import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';
const image = <Image width={Dimensions.get('window').width} source={{uri: '<image uri>'}} />;

try this android:scaleType="fitXY"
<ImageView
android:id="#+id/image_view_full"
android:layout_width="fill_parent"
android:scaleType="fitXY"
android:layout_height="fill_parent" />