Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all 16548 articles
Browse latest View live

Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED

$
0
0

I need to use react-native-scrollable-tab-view and accompanying that, I also installed/setup react-native-viewpager following this link. This error suddenly appeared and currently, I still can't find a way to solve it. I hope someone encountered it already and help me. I just started working with React Native 1 wk ago but this project I've been working on have been existing for more than a year so not all dependencies are updated including react-native which version is 0.59.10. I've already tried using react-native-scrollable-tab-view with a sample project using latest version of react-native and it works fine but unfortunately I don't think I can upgrade this project cause there are just so many dependencies that will be affected that complicates things. I hope there is a way to resolve it without having to affect other dependencies. Here is the error part of the log:

Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/sw mansion/gesturehandler/react/RNGestureHandlerEvent.java:3: error: package android.support.v4.util does not exist import android.support.v4.util.Pools; ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/sw mansion/gesturehandler/react/RNGestureHandlerEvent.java:19: error: package Pools does not exist private static final Pools.SynchronizedPool EVENTS_POOL = ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:3: error: package android.support.v4.util does not exist import android.support.v4.util.Pools; ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:19: error: package Pools does not exist private static final Pools.SynchronizedPool EVENTS_POOL = ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:20: error: package Pools does not exist new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE); ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:20: error: package Pools does not exist new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE); ^ Note: /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 6 errors

FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'.

    Compilation failed; see the compiler error output for details.

  • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/4.10.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 24s 251 actionable tasks: 27 executed, 224 up-to-date error Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/getting-started.html error Command failed: ./gradlew app:installDebug. Run CLI with --verbose flag for more details. Marks-MacBook-Pro:endless-aisle-hybrid markrogercabadsan$


RCTEventEmitter causing issues while making iOS archive

$
0
0

We are trying to make a build of React Native app in iOS and everything goes fine when we run the app on the iOS device whether it is in debug mode or release mode.

But for uploading when we try to make the archive of the app in Xcode then it throws an peculiar error that : Duplicate interface definition for class 'RCTEventEmitter'

We are really struck solving this, if someone could please help us. React Native version is 0.59.10

https://share.getcloudapp.com/7KuyKmAn This is the error.

Any help regarding this is really appreciated.

React Native Debugger state undefined

$
0
0

I am trying to use the remote React Native Debugger for my project. I have installed React-Native-Debugger on my Mac with $ brew update && brew cask install react-native-debugger. Then I added Remote-redux-devtools package with npm install --save-dev remote-redux-devtools

My createStore code looks like this atm.

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'remote-redux-devtools'
import thunk from 'redux-thunk'
/* some other imports */

const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 })
export default createStore(rootReducer, composeEnhancers(
  applyMiddleware(thunk.withExtraArgument(api), logger, firebaseSave)
))

Console output works just fine, but it is not picking up on the actions or redux state. Am I missing a step? Why isn't it picking up redux?

https://github.com/zalmoxisus/remote-redux-devtools

https://github.com/jhen0409/react-native-debugger

react-native-maps fitToSuppliedMarker/fitToCorodinates does not show all markers

$
0
0

i am trying to use simple MapView and display 2 markers.

they both appear correctly on map view but not visible on screen at same time (Image1 rendered by default)

i have to perform manual drag operation before both markers can be seen on screen.(Image2 after i manually drag map so that they can be seen on screen)

i tried using fitToSuppliedMarkers/fitToCocordinates but nothing seems to work.

export default class FavItemMapView extends Component{

constructor(props){
    super(props)
    this.state={
        position:{
            latitude:1.286353,
            longitude:103.853067,
            latitudeDelta: 0,
            longitudeDelta: 0,
        },
        error:null
    }
    this.mapRef = null;
}

componentWillMount(){

    const favPlaceLatitude = parseFloat(this.props.navigation.state.params.latitude)
    const favPlaceLongitude = parseFloat(this.props.navigation.state.params.longitude)
    markers.push({latitude:favPlaceLatitude,longitude:favPlaceLongitude});
    navigator.geolocation.getCurrentPosition(
        (position) => {
          console.log("wokeeey" + width + height);
          console.log(position);
          var lat = parseFloat(position.coords.latitude)
          var long = parseFloat(position.coords.longitude)

          var initialRegion = {
            latitude: lat,
            longitude: long,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }

          this.onRegionChange(initialRegion)
        },
        (error) => this.setState({ error: error.message }),
        { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
      );
}

onRegionChange(region) {
    this.setState({ position:region })
}

componentDidMount(){
    //this.mapRef.fitToSuppliedMarkers(markerIDs,true);
    const favPlaceLatitude = parseFloat(this.props.navigation.state.params.latitude)
    const favPlaceLongitude = parseFloat(this.props.navigation.state.params.longitude)
    this.mapRef.fitToCoordinates([{latitude:favPlaceLatitude,longitude:favPlaceLongitude}], {
        edgePadding: {
          bottom: 200, right: 50, top: 150, left: 50,
        },
        animated: true,
    });
}

render(){

    const { navigation } = this.props;
    const favPlaceLatitude = parseFloat(navigation.state.params.latitude)
    const favPlaceLongitude = parseFloat(navigation.state.params.longitude)

    return(
        <View style={styles.container}>
            <MapView provider={MapView.PROVIDER_GOOGLE} ref={ref => {this.mapRef = ref;}} style={styles.map} region={this.state.position}>
                {this.state.position.latitude &&
                    <MapView.Marker identifier="Marker2" coordinate={{latitude:this.state.position.latitude,longitude:this.state.position.longitude}} pinColor="red"/>
                }
                {this.state.position.longitude &&
                    <MapView.Marker identifier="Marker1" coordinate={{latitude:favPlaceLatitude,longitude:favPlaceLongitude}} pinColor="green"/>
                }
            </MapView>
        </View>
    );
  }
}

const styles={
  container:{
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map:{
    padding:100,
    ...StyleSheet.absoluteFillObject
  }
}

can you someone suggest what is wrong? attaching simulator image for reference. enter image description hereenter image description here

React Native - BVLinearGradient - 'React/RCTViewManager.h' file not found

$
0
0

I am running my React Native app in the iOS Simulator, and I am trying to use BVLinearGradient. I followed all of the instructions in the GitHub ReadMe, but I am receiving an error related to BVLinearGradient.

In the developer console, I am seeing:

Warning: Native component for "BVLinearGradient" does not exist

When I run directly from XCode, I see:

'React/RCTViewManager.h' file not found` (in BVLinearGradientManager.h)
'React/RCTView.h' file not found` (in BVLinearGradient.h)

What is happening here? Thank you.

How do I address React Native network requests failing after upgrading to HTTPS?

$
0
0

EDIT: My issue was I'd moved my repository and in my state of coffee deprivation pointed my editor in the wrong place. Having actually edited the correct sources, my app works fine.

I've been developing a React Native app and most of my functionality is now in place. The backend is a REST API written in Kotlin using the Spark microframework on top of a PostgreSQL database. The app was first written using react-native init before Expo was a thing. I've been using iOS to test the app as I develop it, although the code is pure React Native so porting to Android shouldn't be a massive problem.

When my REST API server was running on localhost:1337 my app experienced no problems whatsoever, however yesterday I deployed to an EC2 instance and secured it using a certificate obtained via letsencrypt (using a Java keystore). Manual queries to the API via the web browser work perfectly (and the certificates are valid) and the queries also work on the Safari browser within the iOS Simulator, but on the simulated React Native app every request now fails since I've pointed them to my new server. The GET requests fail with a warning promise rejection: network request failed and the POST requests fail with a crash and the same error. The requests are given in the form:

var url = "https://example.com/api/posts?lat=" +
    lat + "&lon=" + lon;
    this.setState({url: url});

    const bar = this;
    fetch(url) 
    .then(response => response.json())
    .then(data => {
      var foo = JSON.stringify(data);
      this.setState({ posts: foo});
    })
    .catch((err) => {
      console.log(err)
      reject(err)
    });

I've done all of the usual React Native generic solutions like wiping and rebuilding my ios/build directory, re-installing all my Node modules and even adding an exception to my domain in info.plist (even allowing insecure requests generally, which I think is a bit of a black mark when applying for App Store approval) to no avail whatsoever. When I get home I intend to probe the connection with Wireshark but as the requests are failing immediately without any delay I expect it'll only confirm my suspicion that the requests don't go up at all and are being denied by iOS for some reason. Most of the questions I've seen in my debugging efforts talk about HTTPS working and HTTP failing, which is easily solvable by setting a variable in the iOS config. I've not come across this, the opposite problem in any recent version of React Native.

Any advice with this issue would be much appreciated, I'm really tearing my hair out here. Thanks in advance.

How can I make React Native use the XCode legacy build system?

$
0
0

I'm kind of new to IOS development and especially XCode, I can't manage to find a solution to my problem, so I hope someone here will be able to help me.

Until now I managed to build my react native app in both android and ios but now it's been a few days that I haven't been able to build the ios app anymore, because it uses the "new build system".

I know I have to use the legacy one, which I did previously and it worked fine. But now despite the fact that the "Use legacy build system" option is selected, it still uses the new one when I run "react-native run-ios", which causes several errors and fails the build. This is where I selected the Legacy Build System option

info Launching iPhone 11 (iOS 13.3)
info Building (using "xcodebuild -workspace App.xcworkspace -configuration Debug -scheme App -destination id=AA1BDEDE-F4B6-46B5-95EF-E0428BCE27B8 -derivedDataPath build/App")
....................................................................
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening Drinky.xcworkspace. Run CLI with --verbose flag for more details.
User defaults from command line:
    IDEDerivedDataPathOverride = /Users/user/App/ios/build/App

note: Using new build system
note: Planning build
note: Constructing build description
Build system information

I would appreciate any kind of help, even if it's only a link which can give me some informations about it.

Thanks for reading, and don't hesitate to ask me if you need more informations on anything.

How to change shape of bottomTab

$
0
0

I want to update react native navigation bottom tab bar shape in ios. As its set to default and i want to customise the bottom Tab to meet my desired result .Please help me so that i can solve this problem. Currently i am getting

current status

enter image description here

React native navigation is using uitabarcontroller in node modules.

and i want its shape is something like

Desired result

enter image description here

Please suggest me the approach for this. Thanks


Override old notification- IOS

$
0
0

I'm trying to group notification(override old notification), and i'm using postman to send them(for checking) to the FCM, checking on IOS 13.3.

  • I'ts work in Android with "tag"
  • The problem in IOS

I tried

Add "apns-collapse-id" or with "collapse_key" like the document said but without any success. https://firebase.google.com/docs/cloud-messaging/concept-options

1.I sent in postman

{
    "to":"...........................",
    "collapse_key":"1",
    "data" : {
       "body" : "Body of Your Notification in Data",
       "title": "Title of Your Notification in Title",
       "sound": "default"
       },
    "notification":{
     "title":"7777",
     "priority":"high",
     "body":"Helgfgfdgfdgfdgfgfdgflo how are you?",
     "sound": "default"
    },
      "apns":{
        "headers":{
            "apns-collapse-id":"1"
        }
     }
}

2.And i tried to sent "apns-collapse-id as a header in postman

Where to store data locally to be persistent and safe using React Native without using cloud services?

$
0
0

This is not a question on what storing system use, but is a question on what are the possible strategies to store data locally on a mobile platform (iOS and Android).

I wouldn't use AsyncStorage because data is not encrypted, I see that Realm could be a good candidate, however I am open to other alternatives.

My cross-platform React Native application handles some sensible data that should be persistent on the device. The meaning of persistent that I intend is:

Some sensible data that must be not removed/deleted/cleared by iOS or Android without the permission of the user. Data that must be available at each application upgrade, e.g. at each new release, these data must be remain unchanged and available like nothing happened after App update. Data must not be removed/deleted/cleared if the App is put in background (task manager), turned off or restarted. Data must be available even if the device is rebooted.

I tried each of these cases by using Realm and it seemed to be very good, but since I have not so much experience in mobile development, I preferred to ask the community if my considerations about Realm are correct or not. If no, I would ask what are the possible alternatives and why I am wrong.

Unfortunately, I have no permission to use cloud storages (e.g. CloudKit, iCloud, Firebase and so on...). My App must handle this data only locally on the device.


New scenario

Same identical previous restrictions of above (sensible data that must be not removed/deleted/cleared [...]), but considering the possibility to use cloud storage systems, what are the best good practices in this scenario, or better: where can I find out "a state of the art documentation" about these things for both platforms?

programmatically retrieve Header component height - React Native

$
0
0

Using NativeBase, I added a Header component. Now, I want to programmatically retrieve the height of the header. How can I do this. The code for adding the Header is given below:

I tried using Dimensions.get('window') but it gives me the height of the entire view.

The code:

import React, {Component} from 'react-native';
import {Container, Header, Button, Title, Icon} from 'native-base';
​
export default class ThemeHeaderExample extends Component {
    render() {
        return (
                <Header>
                    <Button transparent />

                    <Title>Header</Title>

                </Header>
        );
    }
}

RN fetch blob download docx or pdf from URL in IOS

$
0
0

What is done:

Implemented in Android and its getting downloaded in specific DCIM directory in android. In ios using DocumentDir to download the pdf or docx file. Using "rn-fetch-blob": "^0.12.0";

Error:

In IOS it says the message in console :

The file saved to /var/mobile/Containers/Data/Application/E6FDC2DD-7FCA-44DC-85C4-A275078F8825/Documents/wow13.pdf

The code to download is something like this :

downloadFileOnSuccess = async () => {
    let dirs =
      Platform.OS == 'ios'
        ? RNFetchBlob.fs.dirs.DocumentDir
        : RNFetchBlob.fs.dirs.DCIMDir;
    console.log(dirs, 'document path');
    RNFetchBlob.config({
      // response data will be saved to this path if it has access right.

      fileCache: true,
      path: dirs + `/wow13.pdf`,
    })
      .fetch(
        'GET',
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
        {
          //some headers ..
        },
      )
      .then(res => {
        // the path should be dirs.DocumentDir + 'path-to-file.anything'
        console.log('The file saved to ', res.path());
      });
  };

But i cannot get where the file is downloaded in my iphone 7 real device. Is there any permission i'm missing in IOS? Havent added any permission for IOS.

I want to display an animated GIF on the splash screen of iOS with ReactNative (or want to have the same behavior)

$
0
0

As the title says, I want to display animated GIFs on the iOS splash screen. However, I saw a lot of information that the iOS splash screen does not support animated GIFs. If you know how to achieve a splash screen-like behavior on iOS, could you give me some advice? Of course, it also supports Android, so I think that a method that can be realized on Android is good. Sorry for poor English.

react-native: 0.60.6

Thank you.

How to properly sub class React native webview to disable the context menu on selection?

$
0
0

I need to disable the default context menu, that pops up when some text is selected in the react-native-webView.

I forked the library and added a new MyWebView.h and MyWebView.m files to try and disable the selection action.

- (BOOL)canPerformAction:(SEL)action withSender:(id)sender
{
    return NO;
}

Then inside RNCWebView.m file, I made the following changes:

  1. In the implementation block of RNCWebView, I instantiated my custom webview as

      @implementation RNCWebView
    
      {
         MJRWebView *_webView;
         (other code here)
      }
    
  2. Then inside initWithFrame, I am doing the following:
     - (instancetype)initWithFrame:(CGRect)frame
      {
         if ((self = [super initWithFrame:frame])) {
         super.backgroundColor = [UIColor clearColor];
         _webView = [[MJRWebView alloc] initWithFrame:self.bounds];
         (other props)
    

The selection got disabled, but other props like onMessage and injectJavascript stopped working. Is this the correct way of disabling the context menu ?

RN 0.38.0 React/RCTBridgeModule.h' file not found

$
0
0

This is a long shot, but I've taken over a project done in RN v .38 and I need to update a library and resolve the build issues without updating the version of react native. I'm trying to update the react-native-aws-cognito-js library and while it looks to be compatible with the formatting change of import statements, I'm still not able to get it to build on IOS. Android is fine.

To reproduce my issue I did the following:

react-native init sample --version 0.38.0
cd sample
npm install react-native-aws-cognito-js
react-native link react-native-aws-cognito-js
react-native run-ios

Which fails with:

/node_modules/react-native-aws-cognito-js/ios/RNAWSCognito.h:4:9: fatal error: 'React/RCTBridgeModule.h' file not found #import

Mobile and RN development is not my wheelhouse, but I'm hoping there is some sort of xcode configuration or tricks I can do to get this working and avoid a major overhaul. Running an upgrade to >.40 would probably take too long and also cause other compatibility issues that I don't have the time to resolve.

Note: I have tried the suggestions in `React/RCTBridgeModule.h` file not found


React Native / Expo iOs - Network Request Failed with Fetch on my Api

$
0
0

Firstly : i went through many ( MANY ) post about this problem, tested them all, but it seems that i'm cursed, or something like that ?

I'm working on expo with the LAN method, on iOs. My back is on .Net Core 3. My iPhone is on the same Wifi than my computer. And my computer is running my .Net back server.

I found at that localhost cannot be handle by expo/react-native. So i tried the IP adresse method and change my back adress and the adress that my front was trying to fetch. Tried the infoPlist with expo. Tried some mysterious things that i don't fully understood with my .Net server. Also tried to turn off my firewall, it didn't change anything. Well, i'm not used to post because existing posts often answer my question.

Here is my code about my fetch method :

export async function callPlanning() {
    try {
        let response = await fetch(
          "http://my.Ipv4.adress:myApiPort/myRoute",
        );
        let responseJson = await response.json();
        return responseJson;
      } catch (error) {
        console.error(error);
      }
}

My Api is working well on Postman. And i can call the facebook test api with this function within my app.

Here is my app code where i'm calling this fetch function :

export default class BetaserieScreen extends Component {
  constructor(props) {
    super(props)
    this.state={
      response: null,
    };
    this.askPlanning = this.askPlanning.bind(this);
  }

  askPlanning = () => {
    this.setState({
      response: Back.callPlanning(),
    })
  }

  render() {
    return (
      <View style={styles.MainContainer}>
        <Text> Beta Serie </Text>
        <TouchableHighlight onPress={this.askPlanning}>
          <Text>Planning</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

If you see anything that could andwer my question or about my code : i'll take it. I'm on it for 2 days, and i've to find a solution... If you need any other information about my system or file about my project, feel free to ask for it if you think you can help me with this problem.

I'll be glad.

React-native - ios - Enoent - No such file or directory found

$
0
0

I'm building an app in react-native for ios. When attempting to build, xcode reports no errors and the simulator starts up. The app begins to load and I get a red error screen with the following info in the log:

2017-03-20 19:22:40.523325 [APPNAME][69099:5420843] [] nw_host_stats_add_src recv too small, received 24, expected 28 2017-03-20 19:22:40.541 [fatal][tid:main] TransformError: /Users/[NAME]/[COMPANY]/dev/[APPNAME]/node_modules/react-native-scrollable-tab-view/index.js: ENOENT: no such file or directory, open '/Users/[NAME]/[COMPANY]/dev/[APPNAME]/node_modules/react-native-scrollable-tab-view/package.json' 2017-03-20 19:22:40.549905 [APPNAME][69099:5420846] [] nw_host_stats_add_src recv too small, received 24, expected 28

Have tried the following to fix:

rm -rf node_modules
rm -fr $TMPDIR/react-*
rm -fr $TMPDIR/npm*
watchman watch-del-all
rm -rf * (in /users/name/developer/xcode/deriveddata/
npm install
react-native upgrade

Also re-install react-native, react-native-cli

Also updated node to newest version

Also reinstalled xcode

React native video not playing video from uri response from React native cameraroll on iOS

$
0
0

I am trying to play react native video from uri returned by react native cameraroll. but video is blank. Code for camera roll is:

CameraRoll.getPhotos({ first: 100, assetType: 'videos', }) .then(r => {

      this.getPhotosFromCamera(r.edges);
    })
    .catch((err) => {
      console.log("here in error : ", err)
      //Error Loading Images
    });

and when I pass an individual uri into react native video player, it is still showing blank.

<Video
        ref={(ref) => this.videoPlayer = ref}
        source={{ uri: item.node.image.uri  }}
        rate={1.0}
        volume={1.0}
        muted={false}
        paused={true}
        stop={!this.props.screenAppearing}
        ignoreSilentSwitch='ignore'
        resizeMode="contain"
        startTime={this.state.videoStartTime}
        endTime={this.state.videoEndTime}
        onLoad={ev => this.videoDuration = ev.duration}
        onProgress={ev => {
          Animated.event([
            { left: this.progressPan }
          ])({
            left: (ev.currentTime/this.videoDuration)*Dimensions.get('window').width
          })
        }}
        style={{
          height: Dimensions.get('window').width*0.8
        }}
      />

Please help. Thanks.

React Native how to display Device folder for file manager app

$
0
0

I want to display my device folder for Gallery app development in React Native. i was searched lot at Google but no improvement. anyone have an idea, please share it.

Is there a way to properly format with React-Intl where I don't get this error?

$
0
0

I am working on a React Native application where I need the post_date that I am getting back from a third-party API to not show up as: 2019-05-10 11:26:39, but instead display: x many days ago.

I tried installing React-Intl and then implementing it in App.js like so:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import { Provider } from "react-redux";
import { IntlProvider } from "react-intl";
import store from "./store";
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";

const MainNavigator = createAppContainer(
  createBottomTabNavigator({
    welcome: WelcomeScreen,
    auth: AuthScreen,
    main: {
      screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
          screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        }
      })
    }
  })
);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <IntlProvider locale="en">
            <MainNavigator />
          </IntlProvider>
        </View>
      </Provider>
    );
  }
}

And in my DeckScreen.js like so:

import React, { Component } from "react";
import { View, Text, Platform } from "react-native";
import { MapView } from "expo";
import { connect } from "react-redux";
import { Card, Button } from "react-native-elements";
// import Moment from "react-moment";
import { FormattedRelative } from "react-intl";
import Swipe from "../components/Swipe";
import * as actions from "../actions";

class DeckScreen extends Component {
  renderCard(job) {
    return (
      <Card title={job.title}>
        <View style={{ height: 300 }}>
          <MapView
            scrollEnabled={false}
            style={{ flex: 1 }}
            cacheEnabled={Platform.OS === "android" ? true : false}
          />
        </View>
        <View style={styles.detailWrapper}>
          <Text>{job.company.id}</Text>
          <FormattedRelative value={job.post_date.toString()} />
        </View>
        <Text>
          {job.description.replace(/<span>/g, "").replace(/<\/span>/g, "")}
        </Text>
      </Card>
    );
  }

I feel like I am closer to getting what I want with React-Intl than with Momentjs, but I am getting this error:

console.error: "[React Intl] Error formatting relative time. RangeError: The date value provided to IntlRelativeFormat#format() is not in valid range."

Is my code not formatted properly? Anyone have experience with how to implement FormattedRelative from React-Intl?

I know I can use toDateString() to get rid of the timestamp portion 2019-05-10 11:26:39 but when I try to implement it via <FormattedRelative value={job.post_date.toDateString()} />, I continue to get the same error message.

Viewing all 16548 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>