Question 199375 in React native Question posted in
The official React Native documentation can be found here.

React native – When I build the apk, I can't see the image in react-native

Even if I do yarn apk:build,
The image is not visible.
I can see it well in the iOS environment

echo "# Delete build folder"
rm -rf android/app/build

echo "# React-Native bundling"
react-native bundle --reset-cache --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

rm -rf android/app/src/main/res/drawable-*
rm -rf android/app/src/main/res/raw

echo "# Gradle build"
export JAVA_HOME=$(/usr/libexec/java_home -v 15)
cd ./android; ./gradlew clean; ./gradlew assembleDebug; cd ..; open ./android/app/build/outputs/apk/debug

echo "# Finish android build"

this is my code

    "build:apk": "./build-apk.sh"

and script in my package.json

please help me

+

{
  "name": "CharlieNotice",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package",
    "clean:build:android": "rm -rf android/app/build",
    "prod:android": "npm run clean:build:android  && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
    "build:apk": "./build-apk.sh"
  },
  "dependencies": {
    "@apollo/client": "^3.7.14",
    "@apollo/react-hooks": "^4.0.0",
    "@gorhom/bottom-sheet": "^4.4.6",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.16",
    "@types/axios": "^0.14.0",
    "@types/styled-components": "^5.1.26",
    "apollo-link-error": "^1.1.13",
    "axios": "^1.4.0",
    "deprecated-react-native-prop-types": "^4.1.0",
    "global": "^4.4.0",
    "graphql": "^16.6.0",
    "ios-deploy": "^1.12.2",
    "moment": "^2.29.4",
    "patch-package": "^7.0.0",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-apollo-network-status": "^5.2.1",
    "react-native": "^0.71.7",
    "react-native-camera": "^4.2.1",
    "react-native-config": "^1.5.1",
    "react-native-flash-message": "^0.4.1",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-reanimated": "^3.1.0",
    "react-native-rename": "^3.2.12",
    "react-native-safe-area-context": "^4.5.2",
    "react-native-screens": "^3.20.0",
    "recoil": "^0.7.7",
    "styled-components": "^5.3.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.71.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

my package.json

        <LogoWrapperComponnet>
          <LogoImageComponent
            source={require('../../assets/logo.png')}></LogoImageComponent>
          <LogoTextComponent>Platform</LogoTextComponent>
        </LogoWrapperComponnet>

and code of the image part

It works normally when pressed, but, I literally can’t see the image.

Tags:

2

Answers


  1. 0

    If you can build the apk properly I don’t think the problem is the building.
    can you update your code of what library you are using to show image, and the exact code of the image part?

    Login or Signup to reply.
  2. 0

    I don’t think you need to remove drawable and raw folder for newer versions of react native

    run these commands

    for ios

    npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/build/bundle.js

    for android

    npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle

    and don’t delete drawable and raw folder

    or just remove or comment these lines from your build-apk.sh file

    rm -rf android/app/src/main/res/drawable-*
rm -rf android/app/src/main/res/raw
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search