react-native-svg | SVG library for React Native, React Native Web | Animation library

by react-native-community Java Version: v12.1.0 License: MIT

Download this library from

kandi X-RAY | react-native-svg Summary

react-native-svg is a Java library typically used in User Interface, Animation, React Native, React applications. react-native-svg has no bugs, it has no vulnerabilities, it has a Permissive License and it has high support. However react-native-svg build file is not available. You can install using 'npm i react-native-svg' or download it from GitHub, npm.

SVG library for React Native, React Native Web, and plain React web projects.

Support

Quality

Security

License

Reuse

kandi-support Support

react-native-svg has a highly active ecosystem.
It has 4820 star(s) with 653 fork(s). There are 89 watchers for this library.
It had no major release in the last 12 months.
There are 112 open issues and 1020 have been closed. On average issues are closed in 69 days. There are 23 open pull requests and 0 closed requests.
It has a positive sentiment in the developer community.
The latest version of react-native-svg is v12.1.0

react-native-svg Support

Best in #Animation

Average in #Animation

react-native-svg Support

Best in #Animation

Average in #Animation

quality kandi Quality

react-native-svg has 0 bugs and 0 code smells.

react-native-svg Quality

Best in #Animation

Average in #Animation

react-native-svg Quality

Best in #Animation

Average in #Animation

security Security

react-native-svg has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
react-native-svg code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

react-native-svg Security

Best in #Animation

Average in #Animation

react-native-svg Security

Best in #Animation

Average in #Animation

license License

react-native-svg is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

react-native-svg License

Best in #Animation

Average in #Animation

react-native-svg License

Best in #Animation

Average in #Animation

build Reuse

react-native-svg releases are available to install and integrate.
Deployable package is available in npm.
react-native-svg has no build file. You will be need to create the build yourself to build the component from source.
Installation instructions, examples and code snippets are available.
It has 7750 lines of code, 655 functions and 95 files.
It has high code complexity. Code complexity directly impacts maintainability of the code.

react-native-svg Reuse

Best in #Animation

Average in #Animation

react-native-svg Reuse

Best in #Animation

Average in #Animation

Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

react-native-svg Key Features

Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).

Easy to convert SVG code to react-native-svg.

Installation Automatically Manually Android iOS

Troubleshooting

Opening issues

Usage Use with content loaded from uri Use with svg files Use with xml strings

Common props

Supported elements Svg Rect Circle Ellipse Line Polygon Polyline Path Text TSpan TextPath G Use Symbol Defs Image ClipPath LinearGradient RadialGradient Mask Pattern Marker ForeignObject

Touch Events

Serialize

Run example

TODO

Known issues

react-native-svg Examples and Code Snippets

See all related Code Snippets

Installation

Copy

Download

yarn add react-native-svg

NOTICE:

Copy

Download

include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

Troubleshooting

Copy

Download

-keep public class com.horcrux.svg.** {*;}

Opening issues

Copy

Download

react-native info

Usage

Copy

Download

import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default class SvgExample extends React.Component {
  render() {
    return (
      &lt;View
        style={[
          StyleSheet.absoluteFill,
          { alignItems: 'center', justifyContent: 'center' },
        ]}
      &gt;
        &lt;Svg height="50%" width="50%" viewBox="0 0 100 100"&gt;
          &lt;Circle
            cx="50"
            cy="50"
            r="45"
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          /&gt;
          &lt;Rect
            x="15"
            y="15"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          /&gt;
        &lt;/Svg&gt;
      &lt;/View&gt;
    );
  }
}

Use with content loaded from uri

Copy

Download

import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () =&gt; (
  &lt;SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  /&gt;
);

Use with svg files

Copy

Download

const { getDefaultConfig } = require('metro-config');

module.exports = (async () =&gt; {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext =&gt; ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Use with xml strings

Copy

Download

import * as React from 'react';
import { SvgXml } from 'react-native-svg';

const xml = `
  &lt;svg width="32" height="32" viewBox="0 0 32 32"&gt;
    &lt;path
      fill-rule="evenodd"
      clip-rule="evenodd"
      fill="url(#gradient)"
      d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
    /&gt;
    &lt;defs&gt;
      &lt;linearGradient
        id="gradient"
        x1="0"
        y1="0"
        x2="8.46631"
        y2="37.3364"
        gradient-units="userSpaceOnUse"&gt;
        &lt;stop offset="0" stop-color="#FEA267" /&gt;
        &lt;stop offset="1" stop-color="#E75A4C" /&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;
`;

export default () =&gt; &lt;SvgXml xml={xml} width="100%" height="100%" /&gt;;

Supported elements:

Copy

Download

&lt;Svg height="100" width="100"&gt;
  &lt;Rect x="0" y="0" width="100" height="100" fill="black" /&gt;
  &lt;Circle cx="50" cy="50" r="30" fill="yellow" /&gt;
  &lt;Circle cx="40" cy="40" r="4" fill="black" /&gt;
  &lt;Circle cx="60" cy="40" r="4" fill="black" /&gt;
  &lt;Path d="M 40 60 A 10 10 0 0 0 60 60" stroke="black" /&gt;
&lt;/Svg&gt;

Serialize

Copy

Download

import * as React from 'react';
import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
import { Svg, Rect } from 'react-native-svg';
import ReactDOMServer from 'react-dom/server';

const isWeb = Platform.OS === 'web';

const childToWeb = child =&gt; {
  const { type, props } = child;
  const name = type &amp;&amp; type.displayName;
  const webName = name &amp;&amp; name[0].toLowerCase() + name.slice(1);
  const Tag = webName ? webName : type;
  return &lt;Tag {...props}&gt;{toWeb(props.children)}&lt;/Tag&gt;;
};

const toWeb = children =&gt; React.Children.map(children, childToWeb);

export default class App extends React.Component {
  renderSvg() {
    return (
      &lt;Svg height="100%" width="100%" style={{ backgroundColor: '#33AAFF' }}&gt;
        &lt;Rect
          x="50"
          y="50"
          width="50"
          height="50"
          fill="#3399ff"
          strokeWidth="3"
          stroke="rgb(0,0,0)"
        /&gt;
      &lt;/Svg&gt;
    );
  }
  serialize = () =&gt; {
    const element = this.renderSvg();
    const webJsx = isWeb ? element : toWeb(element);
    const svgString = ReactDOMServer.renderToStaticMarkup(webJsx);
    console.log(svgString);
  };
  render() {
    return (
      &lt;TouchableOpacity style={styles.container} onPress={this.serialize}&gt;
        {this.renderSvg()}
      &lt;/TouchableOpacity&gt;
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Run example:

Copy

Download


git clone https://github.com/magicismight/react-native-svg-example.git
cd react-native-svg-example
yarn

# run Android: react-native run-android
# run iOS: react-native run-ios

react-native-svg - Fill overlapped area of two ellipses

Copy

Download

<svg fill="none" viewBox="140 100 170 170" width="200">
  
      <ellipse cx="192" cy="190" rx="50" ry="80" stroke="red" strokeWidth="2" id="a"/>
      <ellipse cx="250" cy="150" rx="60" ry="30" stroke="green" strokeWidth="2" id="b"/>
  
  <use xlink:href="#a" clip-path="url(#cp)" fill="gold"/>
  
  <clipPath id="cp">
    <use xlink:href="#b"/>
  </clipPath>
  
<svg>

`useTheme` must be used within `NativeBaseConfigProvider`

Copy

Download

import { NativeBaseProvider } from 'native-base';

return (
<NativeBaseProvider>
  <View style={styles.container}>

    <Header />

    <ProductContainer />

  </View>
</NativeBaseProvider>
);

Drawer Navigation position right

Copy

Download

screenOptions={{drawerPosition:'right',headerShown:false,drawerStyle:{right:0}}}

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Copy

Download

implementation 'com.facebook.android:facebook-marketing:[4,5)'

implementation 'com.facebook.android:facebook-marketing:latest.release'

-----------------------

implementation 'com.facebook.android:facebook-marketing:[4,5)'

implementation 'com.facebook.android:facebook-marketing:latest.release'

How to overcome ERESOLVE errors within EAS build for native-base and Expo?

Copy

Download

        "react-dom": "17.0.1",
        "react-native-safe-area-context": "3.1.9",
        "react-native-svg": "12.1.0",

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

Copy

Download

expo update 43.0.0

-----------------------

"babel-preset-expo": "9.0.2",

How to create a border radius based off props in react native

Copy

Download

<svg width="16" height="16">
  <circle r="8" cx="8" cy="8" fill="red" />
  <path d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z" fill="#fff" />
</svg>

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

Copy

Download

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

eas build -p android fails

Copy

Download

com.facebook.yoga:proguard-annotations:1.14.1
com.facebook.fbjni:fbjni-java-only:0.0.3
com.facebook.flipper:flipper:0.54.0
com.facebook.flipper:flipper-network-plugin:0.54.0
com.facebook.flipper:flipper-fresco-plugin:0.54.0

Issue with Auth Flow using react-navigation v6 in React Native. Error: Invalid hook call. Invariant Violation: "main" has not been registered

Copy

Download

const LoginScreen = () => {
  const { state, dispatch } = React.useContext(AuthContext);

 // here you can use a function to login or something, and dispatch it.

  return (
    <View>
      <Text>Login Screen</Text>
    </View>
  );
};

See all related Code Snippets

Community Discussions

Trending Discussions on react-native-svg

react-native-svg - Fill overlapped area of two ellipses
`useTheme` must be used within `NativeBaseConfigProvider`
Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native
Drawer Navigation position right
QR code generated but it is not scannable - React Native
java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;
Could not find com.google.android:flexbox:1.0.0 react-native-intercom
How to overcome ERESOLVE errors within EAS build for native-base and Expo?
react-native "Export statement may only appear at top level" was working fine until cleaning project how do I find out the issue?
Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

Trending Discussions on react-native-svg

QUESTION

react-native-svg - Fill overlapped area of two ellipses

Asked 2022-Apr-07 at 17:53

We are using react-native-svg library to draw ellipses having following code

<Svg>
      <Ellipse cx={192} cy={190} rx={50} ry={80} stroke={"red"} strokeWidth="2"/>
      <Ellipse cx={250} cy={150} rx={60} ry={30} stroke={"green"} strokeWidth="2"/>
<Svg>

Which looks like the image below

Our requirement is to fill up the area which gets overlapped by two ellipses.

If anyone can put some light on it, how can it be achieved using the SVG library for react-native? or if anything else we have will be very helpful

Thanks.

ANSWER

Answered 2022-Apr-07 at 17:53

The main idea is creating a clipPath with one of the ellipses and reusing the other one clipped by the clipPath.

Please observe that I am giving an id to both ellipses so that I can reuse them with use.

<svg fill="none" viewBox="140 100 170 170" width="200">
  
      <ellipse cx="192" cy="190" rx="50" ry="80" stroke="red" strokeWidth="2" id="a"/>
      <ellipse cx="250" cy="150" rx="60" ry="30" stroke="green" strokeWidth="2" id="b"/>
  
  <use xlink:href="#a" clip-path="url(#cp)" fill="gold"/>
  
  <clipPath id="cp">
    <use xlink:href="#b"/>
  </clipPath>
  
<svg>

Source https://stackoverflow.com/questions/71783657

QUESTION

`useTheme` must be used within `NativeBaseConfigProvider`

Asked 2022-Mar-27 at 13:28

In my project I faced the above error can anyone tell me how to solve this error.

The error I faced is:

Error: useTheme must be used within NativeBaseConfigProvider

This error is located at:

in Container

in ProductContainer (created by App)

in RCTView (created by View)

in View (created by App)

in App (created by ExpoRoot)

in ExpoRoot

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

ProductContainer.js:

import React, { useState, useEffect } from 'react'
import { View, StyleSheet, ActivityIndicator, FlatList, Text} from 'react-native'
import { Container, Header, Icon, Item, Input } from 'native-base';
import ProductList from './ProductList';
import SearchedProduct from './SearchedProducts';
const data = require('../../assets/data/products.json');
const ProductContainer = () => {
    const [products, setProducts ] = useState([]);
    const [productsFiltered, setProductsFiltered] = useState([]);
    const [focus, setFocus] = useState();
    useEffect(() => {
        setProducts(data);
        setProductsFiltered(data);
        setFocus(false);
        return () => {
            setProducts([])
            setProductsFiltered([])
            setFocus()
        }
    }, [])    
    const SearchProduct = (text) => {
        setProductsFiltered(
            products.filter((i) => i.name.toLowerCase().includes(text.toLowerCase()))
        );
    }
    const openList = () => {
        setFocus(true);
    } 
    const onBlur = () => {
        setFocus(flase);
    }
    return (
        <Container>
            <View  style = {{ flexDirection: "row"}}>
                  <Input
                  width = "100%"
                  variant = "rounded"
                  placeholder="Search"
                  onFocus={openList}
                  onChangeText={(text) => SearchProduct(text)}
                  />                  
            </View>
            {focus == true ? (
                <SearchProduct 
                    productsFiltered={productsFiltered}
                />
            ) : (
                <View style={styles.container}>
                <Text>Product Container</Text>
                <View style={styles.listContainer}>
                    <FlatList 
                        data={products}
                        numColumns={2}
                        renderItem={({item}) => <ProductList 
                        key={item.brand}
                        item={item}/>}
                        keyExtractor={item => item.brand}
                    />
                </View>
            </View> 
        )}        
        </Container>        
    )
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
export default ProductContainer

App.js

import { StatusBar } from 'expo-status-bar';

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

//Screens

import Header from './Shared/Header'

import ProductContainer from './Screens/Products/ProductContainer'

export default function App() {

return (

<View style={styles.container}>

  <Header />

  <ProductContainer />

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

});

package.json:

{

"name": "animal-feedmart",

"version": "1.0.0",

"main": "node_modules/expo/AppEntry.js",

"scripts": {

"start": "expo start",

"android": "expo start --android",

"ios": "expo start --ios",

"web": "expo start --web",

"eject": "expo eject"

"dependencies": {

"expo": "~44.0.0",

"expo-status-bar": "~1.2.0",

"native-base": "^3.3.7",

"react": "17.0.1",

"react-dom": "17.0.1",

"react-native": "0.64.3",

"react-native-base": "^1.1.0",

"react-native-safe-area-context": "^4.2.1",

"react-native-svg": "^12.3.0",

"react-native-web": "0.17.1"

"devDependencies": {

"@babel/core": "^7.12.9"

"private": true

}

Please can anyone try to solve this issue as soon as possible

Thanks in advance

ANSWER

Answered 2022-Mar-20 at 13:59

in your app.js import NativeBaseProvider and wrap your other components around it

import { NativeBaseProvider } from 'native-base';

return (
<NativeBaseProvider>
  <View style={styles.container}>

    <Header />

    <ProductContainer />

  </View>
</NativeBaseProvider>
);

Source https://stackoverflow.com/questions/71540355

QUESTION

Cannot Read Property Show of Undefined When Using DocumentPicker.show() in React Native

Asked 2022-Mar-22 at 18:08

I followed some answers from here that are similar to my issues. But unfortunately, the error is not removed. That is why I asked here again.

This is an old versioned React Native project where react-native-document-picker version was 2.1.0. When I upgraded the version to 8.0.0, the error shows as the following screenshot:

The current files are as like below;

android/settings.gradle

...    
include ':react-native-document-picker'
project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
...

android/app/build.gradle

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    ...
    ...
    implementation project(':react-native-document-picker')
}

package.json

{
  "name": "awesomeproject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^6.0.2",
    "@react-navigation/drawer": "^6.3.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "axios": "^0.26.1",
    "moment": "^2.29.1",
    "native-base": "^3.3.7",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-action-button": "^2.8.5",
    "react-native-document-picker": "^8.0.0",
    "react-native-dropdownalert": "^4.5.1",
    "react-native-fcm": "^16.2.4",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-fs": "^2.19.0",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-image-picker": "^4.7.3",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-loading-spinner-overlay": "^3.0.0",
    "react-native-modal-datetime-picker": "^13.1.0",
    "react-native-modalbox": "^2.0.2",
    "react-native-reanimated": "^2.4.1",
    "react-native-safe-area-context": "^4.1.2",
    "react-native-screens": "^3.13.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-simple-toast": "^1.1.3",
    "react-native-svg": "^12.3.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^9.1.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js

import {DocumentPicker, DocumentPickerUtil} from 'react-native-document-picker';

    pressOnAttach() {
        Keyboard.dismiss();
        this.refs.NoticeTitle.blur();
        this.refs.NoticeDescription.blur();
        setTimeout(() => {
                DocumentPicker.show({
                filetype: [DocumentPickerUtil.allFiles()],
            }, (error, res) => {
                if (error === null) {
                    setTimeout(() => {
                        if (!this.checkFileExtension(res.fileName)) {
                            alert(AppText.VALID_EXTENSION_MESSAGE)
                        } else {
                            this.generateList(res.uri, res.fileName, res.fileSize);
                        }
                    }, 1000)
                }
            });
        }, 1000)
    }

When I console.log the DocumentPicker and DocumentPickerUtil, it returns undefined always.

Could anyone help me please to fix this issue? Thanks in advance!

ANSWER

Answered 2022-Mar-22 at 18:08

The reason you are getting DocumentPicker undefined is the react-native-document-picker version 8.0.0 has been updated since version 2.1.0 which code you've posted.

According to the library doc, you have to import the DocumentPicker differently. And the util DocumentPickerUtil is also not available to the updated version. For react-native-document-picker version 8.0.0 you have to import in the following way

import DocumentPicker, { types } from 'react-native-document-picker';

And also DocumentPicker.show method is no longer available you have to use the DocumentPicker.pick method.

Ref:

Source https://stackoverflow.com/questions/71575875

QUESTION

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Asked 2022-Feb-25 at 23:22

It was working fine before I have done nothing, no packages update, no gradle update no nothing just created new build and this error occurs. but for some team members the error occur after gradle sync.

The issue is that build is generating successfully without any error but when opens the app it suddenly gets crash (in both debug and release mode)

Error

    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
            at java.lang.Thread.run(Thread.java:923)

gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
  ext {
      buildToolsVersion = "30.0.2"
      minSdkVersion = 21
      compileSdkVersion = 30
      targetSdkVersion = 30
      ndkVersion = "21.4.7075529"
  }
  repositories {
      google()
      mavenCentral()
      jcenter()
      // maven {
      //    url 'https://maven.fabric.io/public'
      // }
      maven { url "https://www.jitpack.io" }
  }
  dependencies {
      classpath("com.android.tools.build:gradle:4.2.2")
      classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
      // Add the Fabric Crashlytics plugin.
      // classpath 'io.fabric.tools:gradle:1.31.2'
      // firebase performance sdk
      classpath 'com.google.firebase:perf-plugin:1.4.0'
      classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'


      // NOTE: Do not place your application dependencies here; they belong
      // in the individual module build.gradle files
  }
}

allprojects {
  repositories {
      mavenCentral()
      mavenLocal()
      maven {
          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
          url("$rootDir/../node_modules/react-native/android")
      }
      maven {
          // Android JSC is installed from npm
          url("$rootDir/../node_modules/jsc-android/dist")
      }

      google()
      jcenter()
      maven { url 'https://www.jitpack.io' }
  }
}


subprojects {
  afterEvaluate {project ->
      if (project.hasProperty("android")) {
          android {
              buildToolsVersion "28.0.3"
              compileSdkVersion 28
          }
      }
  }
}

subprojects {
  afterEvaluate {project ->
      if (project.hasProperty("android")) {
          android {
              compileSdkVersion 29
              buildToolsVersion '29.0.3'
          }
      }
  }
}

packages

"dependencies": {
  "@eva-design/eva": "^2.1.0",
  "@react-native-async-storage/async-storage": "^1.15.14",
  "@react-native-community/blur": "^3.6.0",
  "@react-native-community/checkbox": "^0.5.0",
  "@react-native-community/netinfo": "^6.0.1",
  "@react-native-community/toolbar-android": "^0.1.0-rc.2",
  "@react-native-firebase/analytics": "^10.3.1",
  "@react-native-firebase/app": "^10.3.0",
  "@react-native-firebase/auth": "^10.3.1",
  "@react-native-firebase/crashlytics": "^10.3.1",
  "@react-native-firebase/dynamic-links": "^10.3.1",
  "@react-native-firebase/firestore": "^10.3.1",
  "@react-native-firebase/iid": "^10.3.1",
  "@react-native-firebase/in-app-messaging": "^10.3.1",
  "@react-native-firebase/messaging": "^10.3.1",
  "@react-native-firebase/perf": "^10.3.1",
  "@react-native-firebase/remote-config": "^10.3.1",
  "@react-native-firebase/storage": "^10.3.1",
  "@react-native-picker/picker": "^2.1.0",
  "@react-navigation/bottom-tabs": "^6.0.9",
  "@react-navigation/native": "^6.0.6",
  "@react-navigation/stack": "^6.0.11",
  "@types/react-native": "^0.65.5",
  "@ui-kitten/components": "^5.1.0",
  "axios": "^0.19.0",
  "i18n-js": "^3.5.1",
  "moment": "^2.24.0",
  "native-base": "2.13.8",
  "react": "17.0.2",
  "react-content-loader": "^4.3.4",
  "react-native": "0.66.0",
  "react-native-actions-sheet": "^0.5.6",
  "react-native-adjust": "^4.28.0",
  "react-native-amplitude-analytics": "^0.2.7",
  "react-native-animatable": "^1.3.3",
  "react-native-code-push": "^7.0.4",
  "react-native-config": "^1.3.3",
  "react-native-contacts": "^5.0.7",
  "react-native-dots-pagination": "^0.2.0",
  "react-native-fbsdk-next": "^6.2.0",
  "react-native-fingerprint-scanner": "^6.0.0",
  "react-native-floating-action": "^1.22.0",
  "react-native-geocoding": "^0.4.0",
  "react-native-geolocation-service": "^5.2.0",
  "react-native-gesture-handler": "^1.5.2",
  "react-native-get-random-values": "^1.4.0",
  "react-native-html-to-pdf-lite": "^0.11.0",
  "react-native-image-base64": "^0.1.4",
  "react-native-image-pan-zoom": "^2.1.11",
  "react-native-image-picker": "^4.1.2",
  "react-native-image-resizer": "^1.2.0",
  "react-native-in-app-review": "^2.1.7",
  "react-native-linear-gradient": "^2.5.6",
  "react-native-loading-spinner-overlay": "^1.1.0",
  "react-native-material-menu": "^1.0.0",
  "react-native-material-textfield": "^0.16.1",
  "react-native-modal": "^13.0.0",
  "react-native-phone-call": "^1.0.9",
  "react-native-ratings": "^7.3.0",
  "react-native-reanimated": "^1.13.0",
  "react-native-safe-area-context": "^3.3.2",
  "react-native-screens": "^3.9.0",
  "react-native-share": "^7.2.1",
  "react-native-smooth-pincode-input": "^1.0.9",
  "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
  "react-native-snap-carousel": "^3.9.1",
  "react-native-splash-screen": "^3.2.0",
  "react-native-svg": "^12.1.1",
  "react-native-version-check": "^3.4.2",
  "react-native-version-number": "^0.3.6",
  "react-native-view-shot": "^3.1.2",
  "react-native-walkthrough-tooltip": "^1.3.0",
  "react-redux": "^7.1.3",
  "redux": "^4.0.4",
  "redux-logger": "^3.0.6",
  "redux-persist": "^6.0.0",
  "redux-thunk": "^2.3.0",
  "rn-fetch-blob": "^0.12.0",
  "urbanairship-react-native": "^12.0.0",
  "uuid": "^8.3.0"
},

ANSWER

Answered 2022-Feb-25 at 23:22

We have fixed the issue by replacing

implementation 'com.facebook.android:facebook-marketing:[4,5)'

implementation 'com.facebook.android:facebook-marketing:latest.release'

in android/app/build.gradle file.

Posted this so someone out there facing the same problem will find the solution easily. It took me and my team around one and a half day to figure it out as there is no clear solution out there.

Solution Ref: here

Source https://stackoverflow.com/questions/71256006

QUESTION

Could not find com.google.android:flexbox:1.0.0 react-native-intercom

Asked 2022-Feb-25 at 18:17

I have a react-native project. After the bitnary (jcenter) shutted down I started to replace it. Currently I'm using mavenCentral(). Also I'm using the react-native-intercom (wrapper for intercom). When I'm trying to build gradlew assembleRelease. Its throws me an error.

Could not determine the dependencies of task ':app:compileReleaseJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:releaseCompileClasspath'.
   > Could not find com.google.android:flexbox:1.0.0.
     Required by:
         project :app > io.intercom.android:intercom-sdk-base:5.5.1

I saw the solution, but it didn't help. this one

My files: (if you need more information let me know <3)

build.gradle(app):

apply plugin: "com.android.application"

import com.android.build.OutputFile
import com.sun.org.apache.xalan.internal.xsltc.compiler.Copy


instead
project.ext.react = [
        entryFile: "index.js",
        enableHermes: false,  // clean and rebuild if changing
        bundleInBeta: true,
        bundleInStaging: true,
        devDisabledInBeta: true,
        devDisabledInStaging: true,
        extraPackagerArgs: ["--max-workers=1"]
]

apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false
def jscFlavor = 'org.webkit:android-jsc:+'

def enableHermes = project.ext.react.get("enableHermes", false);

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    buildToolsVersion '29.0.2'

    defaultConfig {
        applicationId "se.welcomeapp.android"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 5955
        versionName "5.9.55"

        multiDexEnabled true
        vectorDrawables.useSupportLibrary = true
        missingDimensionStrategy 'react-native-camera', 'general'
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        release {
            storeFile file("welcome_keystore.jks")
            storePassword "DjU@y!@6C^qYqYaGyQCo"
            keyAlias "live"
            keyPassword "mX7!&@RZiD2^5ZaWkKAV"
        }
    }
    buildTypes {
        debug {
            applicationIdSuffix ".debug"
            manifestPlaceholders = [isDebug:true]
        }
        beta {
            manifestPlaceholders = [isDebug:false]
            applicationIdSuffix ".beta"
            matchingFallbacks = [ 'release']
            signingConfig signingConfigs.release
        }
        staging {
            manifestPlaceholders = [isDebug:false]
            applicationIdSuffix ".staging"
            matchingFallbacks = [ 'release']
            signingConfig signingConfigs.release
        }
        release {
            manifestPlaceholders = [isDebug:false]
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }

    dexOptions {
        preDexLibraries false
        javaMaxHeapSize "3g"
    }

    packagingOptions {
        pickFirst '**/libjsc.so'
        pickFirst '**/libc++_shared.so'
        pickFirst '**/armeabi-v7a/libc++_shared.so'
        pickFirst '**/x86/libc++_shared.so'
        pickFirst '**/arm64-v8a/libc++_shared.so'
        pickFirst '**/x86_64/libc++_shared.so'
        pickFirst '**/x86/libjsc.so'
        pickFirst '**/armeabi-v7a/libjsc.so'
    }
}

buildscript {
    repositories {
        maven { url 'https://maven.fabric.io/public' }
    }

    dependencies {
        classpath 'io.fabric.tools:gradle:1.28.1'
    }
}

apply plugin: 'io.fabric'

repositories {
    maven { url 'https://maven.fabric.io/public' }
}

dependencies {
    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
    implementation "com.facebook.react:react-native:+"
    implementation project(':react-native-amplitude-analytics')
    implementation project(':react-native-color-matrix-image-filters')
    implementation project(':react-native-pdf')
    implementation project(':rn-fetch-blob')
    implementation project(':react-native-document-picker')
    implementation project(':react-native-sound')
    implementation project(':react-native-audio')
    implementation project(':react-native-branch')
    implementation "org.webkit:android-jsc:r241213"
    implementation project(':@react-native-community_async-storage')
    implementation project(':react-native-svg')
    implementation project(':react-native-webview')
    implementation project(':@react-native-community_netinfo')
    implementation project(':react-native-keychain')
    implementation project(':react-native-share')
    implementation project(':react-native-intercom')
    implementation(project(':react-native-firebase')) {
        transitive = false
    }
    implementation(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
    implementation 'com.google.android.gms:play-services-maps:17.0.0'
    implementation(project(':react-native-geolocation-service')) {
        exclude group: 'com.google.android.gms', module: 'play-services-location'
    }
    implementation 'com.google.android.gms:play-services-location:17.0.0'

    implementation project(':react-native-image-crop-picker')
    implementation project(':react-native-fs')
    implementation project(':react-native-open-settings')
    implementation project(':react-native-linear-gradient')
    implementation project(':bugsnag-react-native')
    implementation project(':react-native-device-info')
    implementation project(':react-native-push-notification')
    implementation project(':react-native-geocoder')
    implementation project(':react-native-vector-icons')
    implementation project(':react-native-i18n')
    implementation project(':react-native-fbsdk')
    implementation project(':react-native-camera')
    provided fileTree(dir: 'libs', include: ['*.jar'])

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation "com.android.support:appcompat-v7:28.0.0"
    implementation "com.android.support:design:28.0.0"

    implementation("com.facebook.react:react-native:0.60.4") {
        // enforce version to fix https://github.com/facebook/react-native/issues/19259
        // if someone send a version of react-native to jcenter, it will use the one
        // from jcenter first before node_modules
        force = true
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermesvm/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }

    implementation 'io.github.inflationx:calligraphy3:3.1.1'
    implementation 'io.github.inflationx:viewpump:2.0.3'
    implementation('com.crashlytics.sdk.android:crashlytics:2.6.8@aar') {
        transitive = true;
    }

    // Firebase dependencies
    implementation "com.google.android.gms:play-services-base:17.0.0"
    implementation "com.google.firebase:firebase-core:17.0.1"
    implementation "com.google.firebase:firebase-messaging:20.2.4"
    implementation "com.google.firebase:firebase-analytics:17.0.1"

    // Intercom with Firebase dependencies
    implementation 'io.intercom.android:intercom-sdk-base:5.5.1'
    implementation 'io.intercom.android:intercom-sdk-fcm:5.+'

    // If your app supports Android versions before Ice Cream Sandwich (API level 14)
    // TODO: upgrade these to 1.3.0 and test if it solves the crash on samsung for animated gifs
    implementation 'com.facebook.fresco:animated-base-support:1.0.1'  // For animated GIF support
    implementation 'com.facebook.fresco:animated-webp:1.0.1'
    implementation 'com.facebook.fresco:animated-gif:1.0.1'
    implementation 'com.facebook.fresco:webpsupport:1.0.1'
    implementation 'com.android.support:multidex:1.0.3'

}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

task wrapper(type: Wrapper) {
    gradleVersion = '5.4.1'
}

apply plugin: 'com.google.gms.google-services'

build.gradle (android):

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
        ext {
                buildToolsVersion = "29.0.2"
                minSdkVersion = 16
                compileSdkVersion = 29
                targetSdkVersion = 29
        }
        repositories {
                google()
                mavenCentral()
        }
        dependencies {
                classpath 'com.android.tools.build:gradle:3.5.3'
                classpath 'com.google.gms:google-services:4.2.0'

            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
}

allprojects {
        repositories {
                google()
                mavenCentral()
                maven { url "$rootDir/../node_modules/react-native/android" }
//              maven { url 'https://maven.google.com' }
                maven {
                    url "https://jitpack.io"
                    credentials { username authToken }
                }
                maven { url "$rootDir/../node_modules/jsc-android/dist" }
        }
}

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 29
                buildToolsVersion "29.0.2"
            }
        }
    }
    project.configurations.all {
        resolutionStrategy {
            eachDependency { details ->
                if (requested.group == 'com.android.support') {
                    if (requested.name.startsWith("support-v4")) {
                        details.useVersion '29.0.0'
                    }
                }
            }
        }
    }
}

ANSWER

Answered 2022-Jan-23 at 12:38

I solved it. If you are using the react-native-intercom wrapper. You need to update it, after update everything works fine

Source https://stackoverflow.com/questions/70801203

QUESTION

How to overcome ERESOLVE errors within EAS build for native-base and Expo?

Asked 2022-Feb-19 at 08:53

I have got the following package.json file. Main purpose is to use Expo 44 with native-base (version ^3.0.0). I could not figure out why such an obvious combination does not work. (Could not find online for native-base, which Expo versions are recommended either.)

package.json:

{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "eject": "expo eject",
        "test": "node ./node_modules/jest/bin/jest.js --watchAll"
    },
    "dependencies": {
        "@expo/samples": "2.1.1",
        "@expo/vector-icons": "^12.0.0",
        "@react-native-async-storage/async-storage": "~1.15.0",
        "@react-native-community/datetimepicker": "4.0.0",
        "@react-native-community/netinfo": "7.1.3",
        "@react-native-picker/picker": "2.2.1",
        "expo": "^44.0.0",
        "expo-ads-admob": "~12.0.0",
        "expo-app-loading": "~1.3.0",
        "expo-apple-authentication": "~4.1.0",
        "expo-application": "~4.0.1",
        "expo-asset": "~8.4.5",
        "expo-auth-session": "~3.5.0",
        "expo-av": "~10.2.0",
        "expo-facebook": "~12.1.0",
        "expo-font": "~10.0.4",
        "expo-haptics": "~11.1.0",
        "expo-image-manipulator": "~10.2.0",
        "expo-random": "~12.1.1",
        "expo-screen-orientation": "~4.1.1",
        "expo-sharing": "~10.1.0",
        "expo-tracking-transparency": "~2.1.0",
        "moment": "^2.24.0",
        "native-base": "^3.0.0",
        "react": "17.0.1",
        "react-native": "0.64.3",
        "react-native-gesture-handler": "~2.1.0",
        "react-native-modal-datetime-picker": "^8.6.0",
        "react-native-picker-select": "^8.0.0",
        "react-native-progress": "^4.1.2",
        "react-native-progress-circle": "^2.1.0",
        "react-native-safe-area-context": "3.3.2",
        "react-native-svg": "12.1.1",
        "react-native-view-shot": "3.1.2",
        "react-native-webview": "11.15.0",
        "react-redux": "^6.0.0",
        "redux": "^4.0.1"
    },
    "devDependencies": {
        "babel-preset-expo": "9.0.1"
    },
    "resolutions": {},
    "private": true
}

Even though all the local debugging and simulator runs work without problem, when the EAS try to build, following errors (coming from npm) are seen.

[stderr] npm ERR! code ERESOLVE
[stderr] npm
[stderr] ERR! ERESOLVE unable to resolve dependency tree
[stderr] npm ERR! 
[stderr] npm ERR! While resolving: undefined@undefined
[stderr] npm ERR! Found: react@17.0.1
[stderr] npm ERR! node_modules/react
[stderr] npm ERR!
[stderr] react@"17.0.1" from the root project
[stderr] npm ERR!   peer react@"*" from native-base@3.3.6
[stderr] npm ERR!   node_modules/native-base
[stderr] npm ERR!     native-base@"^3.0.0" from the root project
[stderr] npm ERR! 
[stderr] npm ERR! Could not resolve dependency:
[stderr] npm ERR! peer react@"17.0.2" from react-dom@17.0.2
[stderr] npm ERR! node_modules/react-dom
[stderr] npm ERR!   peer react-dom@"*" from native-base@3.3.6
[stderr] npm ERR!   node_modules/native-base
[stderr] npm ERR!     native-base@"^3.0.0" from the root project
[stderr] npm ERR! 
[stderr] npm ERR! Fix the upstream dependency conflict, or retry
[stderr] npm ERR! this command with --force, or --legacy-peer-deps
[stderr] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[stderr] npm ERR! 
[stderr] npm ERR! See /Users/expo/.npm/eresolve-report.txt for a full report.
[stderr] 
[stderr] npm ERR! A complete log of this run can be found in:
[stderr] npm ERR!     /Users/expo/.npm/_logs/2022-02-14T09_22_49_729Z-debug.log
npm exited with non-zero code: 1

How to overcome this problem, any ideas?

Chronology:

native-base was added into the project back in 2019, with "^2.10.0" version.
When upgrading to "expo": "^44.0.0" it required the native-base to be upgraded also, around 2021-12.
At 2021-12, native-base is upgraded to "native-base": "^3.0.0"
It was working up until recently, including EAS builds.
Just recently, after 2022-02-12, for some other purposes we updated our code, nuked the node_modules and we were republishing via EAS build and submit. But even though the "native-base": "^3.0.0" entry in the package.json did not change, the npm step in the EAS servers started to fail.

Other Info:

which build of the expo is failing android or ios.

ios

commands you are using to build.

eas build --platform ios --non-interactive

which package manager are you in this project ? yarn or npm.

I use yarn but eas build seems using npm

any other things which will be useful to replicate this error.

Unfortunately I don't have any other clue.

ANSWER

Answered 2022-Feb-19 at 08:53

It seems native-base searches "react-dom": "*" and could not find it so somehow uses "react-dom": "17.0.2" and it in turn looks for "react": "17.0.2" which conflicts with expo's "react": "17.0.1".

So adding "react-dom": "17.0.1" as dependency solved the problem. By this way "react-dom": "*" finds "react-dom": "17.0.1" which is dependent to Expo's version "react": "17.0.1". (Please let me know if this conclusion is wrong.)

Following are the ones related with native-base and these versions should be used otherwise the npm install fails for Expo 44:

        "react-dom": "17.0.1",
        "react-native-safe-area-context": "3.1.9",
        "react-native-svg": "12.1.0",

Reference: https://github.com/GeekyAnts/NativeBase/issues/4647

Source https://stackoverflow.com/questions/71109671

QUESTION

react-native "Export statement may only appear at top level" was working fine until cleaning project how do I find out the issue?

Asked 2022-Feb-09 at 06:34

I'm only seeing mention of changes in babelrc etc. online for this message. I've tried to remove the dependency that gives me this error and it appears that then next dependency evaluated returns the same message.

The error is coming from any/all of my node_modules folder and the code is correct. I'm guessing something has changed w/ versions of something in my dev dependencies but not sure how to track it down...

I'm using RN 61.5 old I know but this is a production env and can't update atm. Any help on where to look to find the issue please?

    "dependencies": {
        "@nartc/react-native-barcode-mask": "1.1.5",
        "@react-native-community/async-storage": "1.7.1",
        "@react-native-community/masked-view": "0.1.5",
        "@react-native-community/netinfo": "6.0.2",
        "@react-native-community/picker": "1.6.5",
        "@reduxjs/toolkit": "1.2.3",
        "clone": "2.1.2",
        "expo-keep-awake": "8.0.0",
        "expo-linear-gradient": "8.0.0",
        "lodash": "4.17.19",
        "moment": "2.24.0",
        "react": "16.9.0",
        "react-native": "0.61.5",
        "react-native-ble-manager": "git+https:/react-native-ble-manager.git#mergeUpstreamv750",
        "react-native-camera": "3.15.1",
        "react-native-date-picker": "2.7.12",
        "react-native-device-battery": "2.0.0",
        "react-native-device-info": "5.5.1",
        "react-native-elements": "^3.4.2",
        "react-native-exception-handler": "^2.10.10",
        "react-native-fs": "2.16.4",
        "react-native-gesture-handler": "1.5.3",
        "react-native-json-tree": "^1.3.0",
        "react-native-lock-task": "1.0.8",
        "react-native-masked-text": "1.13.0",
        "react-native-modal": "11.5.4",
        "react-native-reanimated": "1.4.0",
        "react-native-restart": "0.0.17",
        "react-native-safe-area-context": "0.6.2",
        "react-native-screens": "2.0.0-alpha.23",
        "react-native-svg": "12.0.3",
        "react-native-unimodules": "0.7.0",
        "react-native-vector-icons": "6.6.0",
        "react-native-version-number": "0.3.6",
        "react-navigation": "4.1.1",
        "react-navigation-animated-switch": "0.5.5",
        "react-navigation-header-buttons": "3.0.5",
        "react-navigation-hooks": "1.1.0",
        "react-navigation-stack": "2.0.13",
        "react-redux": "7.1.3",
        "redux": "4.0.5",
        "redux-saga": "1.1.3",
        "redux-storage": "4.1.2",
        "redux-storage-engine-reactnativeasyncstorage": "1.0.7",
        "reselect": "4.0.0",
        "sedcommon": "git+https://sedcommon.git#p2.3.6",
        "semver": "7.3.2",
        "socket.io-client": "4.1.3",
        "styled-components": "5.0.0",
        "ts-optchain": "0.1.8"
    },
    "devDependencies": {
        "@babel/core": "^7.7.7",
        "@babel/runtime": "^7.7.7",
        "@carimus/metro-symlinked-deps": "^1.1.0",
        "@react-native-community/eslint-config": "^0.0.6",
        "@types/jest": "~26.0.13",
        "@types/lodash": "^4.14.153",
        "@types/node": "^14.0.6",
        "@types/react": "^16.9.17",
        "@types/react-native": "^0.60.30",
        "@types/react-navigation": "^3.4.0",
        "@types/react-redux": "^7.1.7",
        "@types/react-test-renderer": "^16.9.1",
        "@types/socket.io": "^2.1.4",
        "@types/styled-components": "^4.4.2",
        "@typescript-eslint/eslint-plugin": "^2.26.0",
        "@typescript-eslint/parser": "^2.26.0",
        "apk-parser": "^0.1.7",
        "babel-jest": "^24.9.0",
        "babel-plugin-dynamic-import-node": "^2.3.0",
        "babel-plugin-module-resolver": "^4.0.0",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.10.1",
        "eslint-plugin-prettier": "^3.1.2",
        "eslint-plugin-react": "^7.19.0",
        "husky": "^4.2.3",
        "jest": "^26.4.2",
        "js-yaml": "^4.1.0",
        "jshint": "^2.11.0-rc1",
        "metro-react-native-babel-preset": "^0.56.4",
        "node-apk-parser": "^0.2.3",
        "prettier": "^2.0.5",
        "prettier-eslint": "^9.0.1",
        "react-native-typescript-transformer": "^1.2.13",
        "react-test-renderer": "16.9.0",
        "redux-devtools-extension": "^2.13.8",
        "redux-perf-middleware": "1.2.2",
        "simple-git": "^2.44.0",
        "ts-jest": "^26.3.0",
        "ts-node": "^10.2.0",
        "typescript": "^4.4.4"
    },

My current babel.conig.js

module.exports = (api) => {
    api.cache.using(() => process.env.NODE_ENV);

    const presets = ['module:metro-react-native-babel-preset'];
    const plugins = [
        ['dynamic-import-node'],
        [
            'module-resolver',
            {
                root: ['./src'],
                extensions: ['.js', '.ts', '.tsx', '.ios.js', '.android.js'],
                alias: {
                    // when changed here also change in tsconfig.json
                    actions: './src/actions',
                    components: './src/components',
                    constants: './src/constants',
                    images: './src/images',
                    lib: './src/lib',
                    reducers: './src/reducers',
                    sagas: './src/sagas',
                    screens: './src/screens',
                    utils: './src/utils',
                    types: './src/types',
                },
            },
        ],
    ];

    return {
        presets,
        plugins,
    };
};

ANSWER

Answered 2022-Feb-09 at 06:34

we decided to take the big plunge. upgrade the project from rn 61.5 to 67! it only took 2 days ;) wish we would have started there...

Source https://stackoverflow.com/questions/70717057

QUESTION

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

Asked 2022-Jan-24 at 21:48

I have recently upgraded my app from SDK 40 to SDK 44 and came across this error App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)

Error Stack Trace:

App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
        ...(options?.jsxRuntime !== 'classic' && {
                    ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at loadCjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:85:18)
    at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:57:16)

Here is my babel.config.js:

return {
    presets: ['babel-preset-expo', { jsxRuntime: 'automatic' }],
    plugins: [
        ['inline-dotenv'],
        ['.....']
    ]
}

Here is my package.json:

{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject",
        "test": "jest"
    },
    "jest": {
        "preset": "jest-expo"
    },
    "dependencies": {
        "@babel/plugin-transform-react-jsx": "^7.16.5",
        "@react-native-async-storage/async-storage": "~1.15.0",
        "@react-native-community/art": "^1.2.0",
        "@react-native-community/datetimepicker": "4.0.0",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/netinfo": "7.1.3",
        "@react-native-community/push-notification-ios": "^1.2.2",
        "@react-native-community/slider": "4.1.12",
        "@react-navigation/native": "^5.1.4",
        "aws-amplify": "^3.3.1",
        "aws-amplify-react-native": "^4.2.6",
        "axios": "^0.19.2",
        "expo": "^44.0.0",
        "expo-app-loading": "~1.3.0",
        "expo-barcode-scanner": "~11.2.0",
        "expo-camera": "~12.1.0",
        "expo-constants": "~13.0.0",
        "expo-font": "~10.0.4",
        "expo-linking": "~3.0.0",
        "expo-mail-composer": "~11.1.0",
        "expo-notifications": "~0.14.0",
        "expo-permissions": "~13.1.0",
        "expo-secure-store": "~11.1.0",
        "expo-sqlite": "~10.1.0",
        "expo-updates": "~0.11.2",
        "expo-web-browser": "~10.1.0",
        "file-saver": "^2.0.2",
        "jsbarcode": "^3.11.3",
        "link": "^0.1.5",
        "metro-config": "^0.64.0",
        "npm": "^8.3.0",
        "qs": "^6.9.4",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
        "react-native-barcode-expo": "^1.1.1",
        "react-native-elements": "^3.2.0",
        "react-native-fs": "^2.16.6",
        "react-native-gesture-handler": "~2.1.0",
        "react-native-modal": "^11.5.6",
        "react-native-modal-datetime-picker": "^8.6.0",
        "react-native-paper": "^3.10.1",
        "react-native-push-notification": "^3.5.2",
        "react-native-reanimated": "~2.3.1",
        "react-native-router-flux": "^4.2.0",
        "react-native-safe-area-context": "3.3.2",
        "react-native-screens": "~3.10.1",
        "react-native-snap-carousel": "^3.9.1",
        "react-native-svg": "12.1.1",
        "react-native-web": "0.17.1",
        "react-navigation-animated-switch": "^0.6.4",
        "react-navigation-drawer": "^2.4.11",
        "react-navigation-header-buttons": "^3.0.5",
        "react-router-dom": "^6.0.0-alpha.3",
        "yarn": "^1.22.17"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.9.2",
        "@react-native-community/eslint-config": "^0.0.7",
        "babel-jest": "^25.1.0",
        "babel-plugin-inline-dotenv": "^1.6.0",
        "babel-preset-expo": "9.0.1",
        "eslint": "^6.8.0",
        "expo-cli": "^5.0.2",
        "jest": "^26.6.3",
        "jest-expo": "^44.0.0",
        "metro-react-native-babel-preset": "^0.66.2",
        "react-test-renderer": "^16.13.1"
    },
    "private": true
}

Any help will be greatly appreciated.

ANSWER

Answered 2021-Dec-21 at 05:52

can you give your

package.json
node version

I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining

Source https://stackoverflow.com/questions/70431115

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-native-svg

With Expo, you'll need to run expo install react-native-svg to install this library. Please refer to Expo docs for more information or jump ahead to Usage.
Install library from npm yarn add react-native-svg
Link native code With autolinking (react-native 0.60+) cd ios && pod install Pre 0.60 react-native link react-native-svg

Support

When Proguard is enabled (which it is by default for Android release builds), it causes runtine error To avoid this, add an exception to android/app/proguard-rules.pro:.