I intend to create a social news feed application for mobile. I have some experience with React so I intend dig into React Native framework. Is this the right choice or there are better ones out there?
What are the development tools you would use to create this kind of application; including IDE, other frameworks and/or libraries and API's.
Any information would be helpful.
Many thanks, Gheo
How to implement Resumable Uploads on Ovh Cloud in react native app? Right now if i upload large file and upload failed at 40% then i have to restart upload from 0%. Is Ovh cloud server supports the resumable uploads?
import RNFetchBlob from 'rn-fetch-blob';
RNFetchBlob.android
.actionViewIntent(
'/storage/emulated/0/Android/data/aaa.bbb.ccc/files/184.apk',
'application/vnd.android.package-archive',
)
.then(() => {
console.log('success');
})
.catch(err => {
console.log('error');
});
In the simulator, the above code works normally, and pops up the installation APK interface
On the phone (Android 8.1), the screen flashed white, then there was nothing, and the installation interface could not pop up, No error message
I am trying to save SQLite file to the phone storage because the user deletes or reinstalls the app then the user will lost the previous data of the app. So is there any way to save data to phone storage for persisting SQLite file? Thank you for your answer.
when I upload the app as aab it crashes with error 'Unable to load script. make sure you are running meters server.' , but when I upload it as apk it works just fine . Help me solve this issue . It is urgent .
I'd like to import a module written natively (java, Android) into my React Native sources, in JS.
I'm building simple React-Native app using Expo. I'm fetching data and I need to collect response cookie headers. I've managed to do that while testing on Android phone with the code below:
fetch('urlWithParams', {
method: 'POST',
credentials: 'include'
})
.then(response => {
console.debug(response.headers.get('Set-Cookie'));
return response.text();
})
.then(text => {
console.log(text);
}).catch(error => {
console.error(error);
});
response.headers.get('Set-Cookie')
The problem is it only returns single response 'Set-Cookie' header while there should be three (I can see all of them while testing in Chrome: Network -> Cookies and Application -> Cookies or in Postman).
I've tried every combination of request headers, testing environments, collecting cookies from document.cookies, etc. Nothing helped.
It seems like it's React-Native + Android problem, I've found the same one here: https://github.com/facebook/react-native/issues/26280
Is there any way of collecting all cookies on Android?
The aim is to slide a component from a flatlist, to slide from right or left to bring up options like we have on Instagram. Instagram has the slider report functionality only for iOS not for android
We already tried using react-native-navigation-drawer, as it can create menu inside of particular view, but it conflicts with our dependencies on project, so we are looking for other options.
everyone. I have ejected expo project. It works well on local. To make standalone app, I execute the command "expo publish" and then make the apk file from android studio. And install this apk file on android phone. But app wasn't run and show following screen:
Screenshot when expo app running
Then how can I build standalone app from ejected expo project.
I'm very happy to hear your advance. Thanks.
My componentDidMount function looks like this :
async componentDidMount() {
const hasLocationPermission = await PermissionsAndroid.check( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION )
console.log('hasLocationPermission ====> ', hasLocationPermission) //returns true
if (hasLocationPermission) {
Geolocation.getCurrentPosition(
console.log('1 ======> ')
(position) => {
console.log('2 ====================================================>')
console.log(position);
},
(error) => {
// See error code charts below.
console.log('3 ====> ')
console.log(error.code, error.message);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);
}
else
{
console.log('Does not have permission to access location')
}
}
None of my console log statements are printing in this except hasLocationPermission which is true. I have a feeling that Geolocation.getCurrentPosition is always null. I am new to React Native, is there anything I am doing wrong? Please help me out here. Thank you!
It does not render in some android like moto g4 and samsung a50 !! It renders perfectly in some Android devices and iOS. When users try to open the app the images is not rendered as supposed to.
React Native version:
System:
OS: macOS 10.15.1
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 943.08 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 16, 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-16 | Intel x86 Atom, android-16 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
Android NDK: 16.0.4293906-beta1
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-progress-circle: 2.0.0
Steps To Reproduce (my code)
<View style={{flex:1,width:'100%',height:'100%'}}>
<View style={{flex:1, height:'100%',backgroundColor:'#fff', paddingBottom:0}}>
<ScrollView removeClippedSubviews={true} style={{padding:10,flex:1}} refreshControl={(<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)}/>)}>
<View style={{marginBottom:30}}>
<Text style={{fontWeight:'bold',color:'#000',fontSize:24}}>{feed.title}</Text>
<FlatList
removeClippedSubviews={true}
style={{marginTop:10,flexDirection:'column'}}
data={feed.content}
horizontal={true}
keyExtractor={(item,index) => index}
renderItem={({item,index}) => {
return (
<TouchableOpacity style={{marginBottom:15,flexBasis: '100%',flex:1}} onPress={()=>{this.contentOnPress(item)}}>
<View style={{alignItems: 'center',width:width,height:this.height*0.6,borderRadius:5}}>
<Image resizeMode={'cover'} style={{width:width, height:(this.height*0.6), borderRadius:5,borderWidth:1,borderColor:'#ccc'}} resizeMode={'cover'} source={(item.thumb ? {uri: item.thumb.replace('upload/','upload/q_auto,w_auto/')} : require('./../../assets/img/profile-pic.png'))}/>
</View>
<View>
<Text style={{fontWeight:'bold',color:'#000'}} numberOfLines={1}>{item.header}</Text>
<Text style={{color:'#000'}} numberOfLines={1}>{item.title}</Text>
</View>
</TouchableOpacity>
)
}} />
</View>
</ScrollView>
</View>
</View>
Been trying to achieve this feature for hours.
What I want: User clicks on a button and it will direct the user to the sharing to story view in Instagram with the image chose in my React Native app.
What document I follow: https://developers.facebook.com/docs/instagram/sharing-to-stories/
I created a function in Java like so
@ReactMethod
public void NavigateToInstaStory(){
String attributionLinkUrl = "https://www.my-aweseome-app.com/p/BhzbIOUBval/";
Uri backgroundAssetUri = Uri.parse("https://i.imgur.com/9Q0LXop.jpg");
Intent intent = new Intent("com.instagram.share.ADD_TO_STORY");
intent.setDataAndType(backgroundAssetUri, "image/jpeg");
intent.putExtra("content_url", attributionLinkUrl);
intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
Activity activity = getCurrentActivity();
if(activity.getPackageManager().resolveActivity(intent, 0) != null){
activity.startActivity(intent);
}
}
And calling the Java function in React Native like so
_start = () => {
NativeModules.ShareToInstaStory.NavigateToInstaStory()
};
However, it will never navigate to Instagram.
In fact, when I set data and type, it will never launch Instagram. But if I set only the type, it will launch Instagram but Instagram would closes immediately.
PS: I am completely new to native Android.
I have used Alert.alert with ok button (on ok button click have added redirection) in react native. Its working fine on android but on IOS Alert shows but its getting closed immediately.
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{
text: 'OK', onPress: () => {this.props.navigation.navigate('Dashboard')}
},
],
{ cancelable: false }
);
I would like to have multiple vibrations on receiving one local push notification in background in react-native. How is it possible?
I tried using https://github.com/zo0r/react-native-push-notification with the following code for a silent push notification:
PushNotification.localNotificationSchedule({
message: "This is one message with three vibrations",
playSound: true,
soundName: "silentSound.wav",
repeatType: "day",
date: new Date(time),
})
Sure, I could schedule multiple notifications in a row, but then I would have also multiple messages.
In the new version i.e, the 0.61 of react-native, I didn't find any sort of mechanism for changing the font of the title. The earlier versions have their own solutions but the present one doesn't have one, which in turn prompted me to ask the question. How do you change the font?
Is there a way to save react-native-firebaseremote push notification on the AsyncStorage of the app whenever the notification is received(not tapped or clicked, whenever is received) when the app is killed or closed? I tried using that headlesstask but doesn't do anything. (android)
My code: index.js
import {AppRegistry, AsyncStorage} from 'react-native';
import firebase from 'react-native-firebase';
import App from './App';
import {name as appName} from './app.json';
import { bgMessaging } from './bgMessaging';
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging)
AppRegistry.registerComponent(appName, () => App);
bgMessaging.js
import {AsyncStorage, Platform} from 'react-native';
import firebase from 'react-native-firebase';
export default async (message) => {
const channel = new firebase.notifications.Android.Channel('myapp-channel', 'myAPP Channel',
firebase.notifications.Android.Importance.Max).setDescription('myAPP Channel');
firebase.notifications().android.createChannel(channel);
const localNotification = new firebase.notifications.Notification().android
.setChannelId('myapp-channel')
.android.setSmallIcon('ic_stat_ic_notif')
.android.setLargeIcon('ic_launcher_round')
.android.setColor('#000000')
.android.setPriority(firebase.notifications.Android.Priority.High)
.setNotificationId(message._notificationId)
.setSound('default')
.setTitle(message._data.title)
.setSubtitle(message._data.body)
.setBody(message._data.body)
.setData(message._data)
firebase.notifications().displayNotification(localNotification).catch((err)=>console.log('err',err))
//console.log(msg.data);
let offerToBeSaved = {
"title" : message._data.title,
"body" : message._data.body,
"dateReceived" : message._data.dateReceived,
"coupon": message._data.coupon
}
let existingOffers = await AsyncStorage.getItem("offers");
let newOffer = JSON.parse(existingOffers);
if( !newOffer ){
newOffer = []
}
newOffer.push( offerToBeSaved )
await AsyncStorage.setItem("offers", JSON.stringify(newOffer) )
.then( ()=>{
console.log('saved offer')
} )
.catch( ()=>{
console.log('error saving offer')
} )
return Promise.resolve()
}
payload when sending the notification from nodejs:
let payload = {
notification: {
title: 'MYAPP',
body: 'You just won $1M!!'
},
data: {
title: 'You WON $1M !!!',
body: 'can you imagine? lol - fake news',
dateReceived: "moment() - a date"
coupon: "123"
}
}
When the notification is received. It is displayed but doesn't execute the bgMessaging code. If anyone can help much appreciated. I've been struggling with this for days.
I am trying to work with the native native for a school project, but when executing the following command in cmd: emulator -version he returned this error to me:
[4640]:ERROR:android/android-emu/android/qt/qt_setup.cpp:28:Qt library not found at ..\emulator\lib64\qt\lib
Could not launch 'C:\Users\gusta..\emulator\qemu\windows-x86_64\qemu-system-i386.exe': No such file or directory
already changed the path in several ways and I think the problem is not this so if someone can help me grateful
I am linking assets for the purpose of using external custom fonts. The fonts folder is in './android/app/src/main/assets/fonts/'. 'react-native link' does not work but 'npx react-native link' works, but with this error.
Would be great if somebody solved this problem. Thanks in advance!
I try to
react-native run-android
and meet this problem
JS server already running.
Running C:\Users\丶丶困困兽兽犹犹斗斗\AppData\Local\Android\sdk/platform-tools/adb -s 192.168.76.101:5555 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug...
Unzipping C:\Users\丶丶困困兽兽犹犹斗斗\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0txzcpc0\gradle-2.4-all.zip to C:\Users\丶丶困困兽兽犹犹斗斗\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0txzcpc0Exception in thread "main" java.util.zip.ZipException: error in opening zip file
at java.util.zip.ZipFile.open(Native Method)
at java.util.zip.ZipFile.<init>(ZipFile.java:114)
at java.util.zip.ZipFile.<init>(ZipFile.java:131)
at org.gradle.wrapper.Install.unzip(Install.java:159)
at org.gradle.wrapper.Install.access$500(Install.java:26)
at org.gradle.wrapper.Install$1.call(Install.java:69)
at org.gradle.wrapper.Install$1.call(Install.java:46)
at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
at org.gradle.wrapper.Install.createDist(Install.java:46)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:126)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
SDK works well and can find device in adb devices
I'm trying to enable users to use maps offline in my react native App, I'm using react-native-maps
I want to provide the offline mode just for a predefined area (let's say a city), therefore I need to download all the needed tiles which will be a huge number of images, so I wonder if there is a way in the google map API to download an area of the map (like in google map app)?
from the documentation it is possible to enable caching, which I do the same thing (according to the doc) however, In my case I don't want to cache every place that the user go to, as I said I just want to cache/download a predefined area.
EDIT 1
react-native-maps support offline navigation for that, I need to use this code :
<LocalTile pathTemplate={this.state.pathTemplate} tileSize={256}/>
with pathTemplate point to my tiles location which had to have the following hierarchy :
location/{z}/{x}/{y}
therefore my real probleme is how to get the tiles for my area.
I can do it manually by saving tiles from the google maps tile server, however I don't know if it is legal and also it will take a lot of time and calculation (when zooming in, I need to calculate the coordinated of the next tiles )
so It will be nice, if google map API provide a way to download an area's tile (with needed zoom),
another alternative would be using another map provider like OpenStreetMAp, but here also, I need to find a way to download all tiles at once