Code Monkey home page Code Monkey logo

masked-view's Introduction

React Native MaskedView

Build Status Version MIT License Lean Core Badge

Provides a React component that renders a masked view.

Platforms Supported

  • iOS
  • Android
  • Web

Getting Started

yarn add @react-native-masked-view/masked-view

or

npm install --save @react-native-masked-view/masked-view

Using React Native >= 0.60

Linking the package manually is not required anymore with Autolinking.

Remember to install the pod with:

npx pod-install

Using React Native < 0.60

You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:

react-native link @react-native-masked-view/masked-view

Usage

Import the MaskedView component from @react-native-masked-view/masked-view and use it like so:

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';

const App = () => {
  return (
    <MaskedView
      style={{ flex: 1, flexDirection: 'row', height: '100%' }}
      maskElement={
        <View
          style={{
            // Transparent background because mask is based off alpha channel.
            backgroundColor: 'transparent',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 60,
              color: 'black',
              fontWeight: 'bold',
            }}
          >
            Basic Mask
          </Text>
        </View>
      }
    >
      {/* Shows behind the mask, you can put anything here, such as an image */}
      <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
    </MaskedView>
  );
}

export default App

The following image demonstrates that you can put almost anything behind the mask. The three examples shown are masked <View>, <Text>, and <Image>.

Props

Reference

maskElement

Type Required
element Yes

androidRenderingMode

By default hardware rendering mode will be used for best performance, however if you need to animate your maskElement then you’ll need to switch to software to get your mask to update. This prop only affects Android.

Type Required Default
software, hardware No hardware

masked-view's People

Contributors

aleksandrchernyavenko avatar alpha0010 avatar andresribeiro avatar brentvatne avatar campbellmg avatar cpojer avatar dependabot[bot] avatar dulmandakh avatar evanbacon avatar fetten avatar fondorn avatar gabrieldonadel avatar hexadecy avatar iljadaderko avatar johgusta avatar k-ibr avatar keshavkaul avatar koplyarov avatar levibuzolic avatar lrnz09 avatar mateusz1913 avatar matt-oakes avatar matteodanelli avatar naturalclar avatar ngocle2497 avatar reime005 avatar simek avatar someonewithpc avatar tdekoning avatar xzilja avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

masked-view's Issues

Can't use scrollable or Animated elements as maskedElement

Bug

At first i tried an Animated.View as maskedElement and animated the transformation and nothing happened. no transformation whatsoever. then i tried to test this with a ScrollView with a scrollable content, and again, no luck getting this to work.

Environment info

React native info output:

System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.22 GB / 15.54 GB
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.0/bin/npm
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.1
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.4 => 0.60.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 0.1.1

Steps To Reproduce

<MaskedView
        style={{
          flex: 1,
          flexDirection: 'column',
          height: '100%',
          justifyContent: 'center'
        }}
        maskElement={
          <View
            style={{
              backgroundColor: 'transparent'
            }}
          >
            <ScrollView style={{ height: '100%' }}>
              <View style={{ height: 500 }} />
              <Text>This is A Mask</Text>
              <View style={{ height: 500 }} />
            </ScrollView>
          </View>
        }
      >
       
        <View style={{ flexGrow: 1, backgroundColor: '#00F' }} />
        <View style={{ flexGrow: 1, backgroundColor: '#0F0' }} />
        <View style={{ flexGrow: 1, backgroundColor: '#F00' }} />
</MaskedView>

Output :
Screenshot_1564930403

Is this approach even possible? using Animated or scrollable inside the MaskedView?

Image as a mask for another image not rendering on Android

Bug report

Summary

Trying to apply some image shape masking using .png image. Everything works as expected on iOS, but android doesn't render anything, just empty. If i try to replace image mask with text, android works as expected, problem exist if use image as a mask element.

Image used for masking:
shape

And result:
Снимок экрана 2020-08-25 в 18 02 32

Environment info

react-native info output:

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 112.46 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 29
      Build Tools: 27.0.3, 28.0.3, 29.0.2, 29.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_201 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^0.1.10

Reproducible sample code

code

如果在MainActivity中不提前加载platform.android.bundle 会导致崩溃

如果注释掉MainActivity中的这几行

        if (!reactInstanceManager.hasStartedCreatingInitialContext()) {
            reactInstanceManager.createReactContextInBackground();
        }```
会导致崩溃

修复方法是:
修改AsyncReactActivity中
```java
//默认給null的ComponentName
  protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, null);
    }


//runApp中加载完成了Bundle再调用mDelegate.loadApp(getMainComponentName());
protected void runApp(String scriptPath){
        if(scriptPath!=null){
            scriptPath = "file://"+scriptPath.substring(0,scriptPath.lastIndexOf(File.separator)+1);
        }
        final String path = scriptPath;
        final RnBundle bundle = getBundle();
        final ReactInstanceManager reactInstanceManager = ((ReactApplication)getApplication()).getReactNativeHost().getReactInstanceManager();
        if(bundle.scriptType == ScriptType.NETWORK){//如果是网络加载的话,此时正在子线程
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    ScriptLoadUtil.setJsBundleAssetPath(
                            reactInstanceManager.getCurrentReactContext(),
                            path);
                    mDelegate.loadApp(getMainComponentNameInner());
                }
            });
        } else {//主线程运行
            ScriptLoadUtil.setJsBundleAssetPath(
                    reactInstanceManager.getCurrentReactContext(),
                    path);
            mDelegate.loadApp(getMainComponentName());
        }
    }

A problem occurred evaluating project ':@react-native-community_masked-view'

Bug

A problem occurred evaluating project ':@react-native-community_masked-view'.

Environment info

[email protected]
[email protected]
[email protected]

React native info output:

 npm info it worked if it ends with ok
npm verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'C:\\Users\\Arnold LAMBOU\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'run',
npm verb cli   'android',
npm verb cli   '--verbose' ]
npm info using [email protected]
npm info using [email protected]
npm verb run-script [ 'preandroid', 'android', 'postandroid' ]
npm info lifecycle [email protected]~preandroid: [email protected]
npm info lifecycle [email protected]~android: [email protected]

> [email protected] android E:\Programme\react-native-apps\WNews
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 990 file(s) to forward-jetify. Using 2 workers...
info JS server already running.
'c:\Users\Arnold' n’est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.
info Launching emulator...
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...

FAILURE: Build failed with an exception.

* Where:
Build file 'E:\Programme\react-native-apps\WNews\node_modules\@react-native-community\masked-view\android\build.gradle' line: 14

* What went wrong:
A problem occurred evaluating project ':@react-native-community_masked-view'.
> build_cqgb0zdxtkdo1v4oxqsieu7q1$_run_closure1$_closure3

* 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

BUILD FAILED in 20s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* Where:
Build file 'E:\Programme\react-native-apps\WNews\node_modules\@react-native-community\masked-view\android\build.gradle' line: 14

* What went wrong:
A problem occurred evaluating project ':@react-native-community_masked-view'.
> build_cqgb0zdxtkdo1v4oxqsieu7q1$_run_closure1$_closure3

* 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

BUILD FAILED in 20s

    at checkExecSyncError (child_process.js:616:11)
    at execFileSync (child_process.js:634:13)
    at runOnAllDevices (E:\Programme\react-native-apps\WNews\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
    at process._tickCallback (internal/process/next_tick.js:68:7)
npm verb lifecycle [email protected]~android: unsafe-perm in lifecycle true
npm verb lifecycle [email protected]~android: PATH: C:\Users\Arnold LAMBOU\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\Programme\react-native-apps\WNews\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\php;C:\composer;C:\Users\Arnold LAMBOU\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files (x86)\Yarn\bin\;C:\Program Files\PuTTY\;C:\Users\Arnold LAMBOU\AppData\Local\Android\Sdk\platform-tools;;C:\Program Files\Microsoft VS Code\bin;C:\Users\Arnold LAMBOU\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\Arnold LAMBOU\AppData\Local\Programs\Python\Python37\;C:\Users\Arnold LAMBOU\AppData\Local\Microsoft\WindowsApps;C:\Users\Arnold LAMBOU\AppData\Roaming\Composer\vendor\bin;C:\Users\Arnold LAMBOU\AppData\Roaming\npm;C:\Users\Arnold LAMBOU\AppData\Local\Yarn\bin;C:\ngrok;C:\Program Files\MongoDB\Server\4.2\bin;C:\Program Files\heroku\bin;C:\Users\Arnold LAMBOU\AppData\Roaming\Python\Python37\Scripts
npm verb lifecycle [email protected]~android: CWD: E:\Programme\react-native-apps\WNews
npm info lifecycle [email protected]~android: Failed to exec android script
npm verb stack Error: [email protected] android: `react-native run-android`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (C:\Users\Arnold LAMBOU\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
npm verb stack     at EventEmitter.emit (events.js:189:13)
npm verb stack     at ChildProcess.<anonymous> (C:\Users\Arnold LAMBOU\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
npm verb stack     at ChildProcess.emit (events.js:189:13)
npm verb stack     at maybeClose (internal/child_process.js:970:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
npm verb pkgid [email protected]
npm verb cwd E:\Programme\react-native-apps\WNews
npm verb Windows_NT 10.0.17134
npm verb argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Arnold LAMBOU\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "android" "--verbose"
npm verb node v10.15.1
npm verb npm  v6.13.6
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] android: `react-native run-android`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm verb exit [ 1, true ]
npm timing npm Completed in 68382ms

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Arnold~1\AppData\Roaming\npm-cache\_logs\2020-02-22T19_44_46_925Z-debug.log

Library version: 0.1.6

Steps To Reproduce

react-native run-android

Reproducible sample code

react-native run-android

Masked View doesn't work on my Android

Bug

I just use MaskedView, on iOs it works perfectly but nothing is displayed on Android.

Environment info

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 571.29 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.1 - /usr/local/bin/node
    npm: 6.13.4 - ~/.npm-global/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    @react-native-community/cli: ^3.0.4 => 3.0.4
    react: 16.8.6 => 16.8.6
    react-native: 0.60.4 => 0.60.4

Library version: 0.1.5

Steps To Reproduce

Just launch on Android. It's an Huawei Y5II Android 5.1 API Version 22
...

Describe what you expected to happen:

Like on iOs, I expected to happen that:
Screenshot 2020-01-01 at 21 22 39

but that happen

IMG_2058

Reproducible sample code

const ProgressBarDetails = (props) => {
    let title = props.title || "#progress option#"
    let percentage = props.percentage ? String(props.percentage) + "%" : "0%"
    let supportColor = props.supportColor || "#EFEFEF"
    let progressColor = props.progressColor || GlobalStyle.primaryColor
    let onSupportTextColor = props.onSupportTextColor || GlobalStyle.black
    let onProgressTextColor = props.onProgressTextColor || '#fff'

    return (
        <View style={[styles.progressBarWrapper, props.wrapperStyle]}>
            <View style={[styles.progressBarSupport, {backgroundColor: supportColor}]} />
            <View style={[styles.absolute,{width: percentage, backgroundColor: progressColor}]} />
            <MaskedView
                style={styles.maskTextContainer}
                maskElement={
                    <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'transparent'}}>
                        <Text
                            style={styles.maskedText}
                            numberOfLines={1}>
                            {title}
                        </Text>
                    </View>
                }>
                <View style={[styles.absolute,{backgroundColor: onSupportTextColor}]} />
                <View style={[styles.absolute,{width: percentage, backgroundColor: onProgressTextColor}]} />
            </MaskedView>
            <View style={{...StyleSheet.absoluteFill, alignItems: 'stretch', justifyContent: 'center'}}>
                <Tooltip
                    withOverlay={false}
                    withPointer={false}
                    containerStyle={styles.tooltip}
                    backgroundColor={GlobalStyle.black}
                    popover={<Text style={styles.tooltipText}>{title}</Text>}
                >
                    <View
                        style={{
                            height: props.wrapperStyle && props.wrapperStyle.height ? props.wrapperStyle.height : DEFAULT_HEIGHT_PROGRESS_BAR,
                        }}
                    />
                </Tooltip>
            </View>
        </View>
    )
}

export default ProgressBarDetails

const DEFAULT_HEIGHT_PROGRESS_BAR = 25

const styles = StyleSheet.create({
    progressBarWrapper: {
        flex: 1,
        borderRadius: 200,
        height: DEFAULT_HEIGHT_PROGRESS_BAR,
        overflow: 'hidden',
    },
    progressBarSupport: {
        flex: 1,
    },
    absolute: {
        ...StyleSheet.absoluteFill,
    },
    maskTextContainer: {
        ...StyleSheet.absoluteFill,
        height: "100%",
        justifyContent: 'center',
        alignItems: 'center',
    },
    maskedText: {
        marginHorizontal: 15,
        fontSize: 13,
        color: 'black'
    },
    tooltip: {
        height: "auto",
        width: Dimensions.get('window').width / 1.1,
        transform: [
            {translateX: - Dimensions.get('window').width * 0.41}
        ],
        borderRadius: 200,
    },
    tooltipText: {
        color: '#fff',
        ...GlobalStyle.fontFamilyRegular,
        fontSize: 13,
        textAlign: 'center'
    }
})

Cannot install with yarn

I try to add this package to my project using yarn, but yarn is unable to find the package on the registry.

Does anyone know about this problem and has a workaround?

$ yarn add @react-native-community/masked-view
yarn add v1.22.4
[1/4] Resolving packages...
error Couldn't find package "@react-native-community/masked-view@" required by "[email protected]" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

A problem occurred configuring project ':react-native-community_masked-view'.

Bug

After installing '@react-native-community/masked-view' i'm facing this error.
I also installed a bunch of gradle versions and plugins but still the same.

Environment info

Binaries:
Node: 10.13.0
Yarn: 1.17.3
npm: 6.4.1
IDEs:
Android Studio: Version 3.1.0.0 AI-173.4907809
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

React native info output:

$ npm run android

> [email protected] android E:\Projects\ReactNative\Real\Wester
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 964 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
info Installing the app...
<-------------> 0% WAITING
> IDLE

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':react-native-community_masked-view'.
> Could not resolve all artifacts for configuration ':react-native-community_masked-view:classpath'.
   > Could not find gradle.jar (com.android.tools.build:gradle:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.jar
   > Could not find builder.jar (com.android.tools.build:builder:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/builder/3.3.1/builder-3.3.1.jar
   > Could not find tracker.jar (com.android.tools.analytics-library:tracker:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/tracker/26.3.1/tracker-26.3.1.jar
   > Could not find shared.jar (com.android.tools.analytics-library:shared:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/shared/26.3.1/shared-26.3.1.jar
   > Could not find crash.jar (com.android.tools.analytics-library:crash:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/crash/26.3.1/crash-26.3.1.jar
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint-gradle-api/26.3.1/lint-gradle-api-26.3.1.jar
   > Could not find gradle-api.jar (com.android.tools.build:gradle-api:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle-api/3.3.1/gradle-api-3.3.1.jar
   > Could not find databinding-compiler-common.jar (androidx.databinding:databinding-compiler-common:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/androidx/databinding/databinding-compiler-common/3.3.1/databinding-compiler-common-3.3.1.jar
   > Could not find manifest-merger.jar (com.android.tools.build:manifest-merger:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/manifest-merger/26.3.1/manifest-merger-26.3.1.jar
   > Could not find sdk-common.jar (com.android.tools:sdk-common:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/sdk-common/26.3.1/sdk-common-26.3.1.jar
   > Could not find builder-test-api.jar (com.android.tools.build:builder-test-api:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/builder-test-api/3.3.1/builder-test-api-3.3.1.jar
   > Could not find ddmlib.jar (com.android.tools.ddms:ddmlib:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/ddms/ddmlib/26.3.1/ddmlib-26.3.1.jar
   > Could not find sdklib.jar (com.android.tools:sdklib:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/sdklib/26.3.1/sdklib-26.3.1.jar
   > Could not find layoutlib-api.jar (com.android.tools.layoutlib:layoutlib-api:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/layoutlib/layoutlib-api/26.3.1/layoutlib-api-26.3.1.jar
   > Could not find dvlib.jar (com.android.tools:dvlib:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/dvlib/26.3.1/dvlib-26.3.1.jar
   > Could not find repository.jar (com.android.tools:repository:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/repository/26.3.1/repository-26.3.1.jar
   > Could not find common.jar (com.android.tools:common:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/common/26.3.1/common-26.3.1.jar
   > Could not find jetifier-processor.jar (com.android.tools.build.jetifier:jetifier-processor:1.0.0-beta02).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/jetifier/jetifier-processor/1.0.0-beta02/jetifier-processor-1.0.0-beta02.jar
   > Could not find bundletool.jar (com.android.tools.build:bundletool:0.6.0).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/bundletool/0.6.0/bundletool-0.6.0.jar
   > Could not find jetifier-core.jar (com.android.tools.build.jetifier:jetifier-core:1.0.0-beta02).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/jetifier/jetifier-core/1.0.0-beta02/jetifier-core-1.0.0-beta02.jar
   > Could not find builder-model.jar (com.android.tools.build:builder-model:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/builder-model/3.3.1/builder-model-3.3.1.jar
   > Could not find protos.jar (com.android.tools.analytics-library:protos:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/protos/26.3.1/protos-26.3.1.jar
   > Could not find apkzlib.jar (com.android.tools.build:apkzlib:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/apkzlib/3.3.1/apkzlib-3.3.1.jar
   > Could not find apksig.jar (com.android.tools.build:apksig:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/apksig/3.3.1/apksig-3.3.1.jar
   > Could not find annotations.jar (com.android.tools:annotations:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/annotations/26.3.1/annotations-26.3.1.jar
   > Could not find databinding-common.jar (androidx.databinding:databinding-common:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/androidx/databinding/databinding-common/3.3.1/databinding-common-3.3.1.jar
   > Could not find baseLibrary.jar (com.android.databinding:baseLibrary:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/databinding/baseLibrary/3.3.1/baseLibrary-3.3.1.jar

* 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

BUILD FAILED in 6s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':react-native-community_masked-view'.
> Could not resolve all artifacts for configuration ':react-native-community_masked-view:classpath'.
   > Could not find gradle.jar (com.android.tools.build:gradle:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.3.1/gradle-3.3.1.jar
   > Could not find builder.jar (com.android.tools.build:builder:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/builder/3.3.1/builder-3.3.1.jar
   > Could not find tracker.jar (com.android.tools.analytics-library:tracker:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/tracker/26.3.1/tracker-26.3.1.jar
   > Could not find shared.jar (com.android.tools.analytics-library:shared:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/shared/26.3.1/shared-26.3.1.jar
   > Could not find crash.jar (com.android.tools.analytics-library:crash:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/crash/26.3.1/crash-26.3.1.jar
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint-gradle-api/26.3.1/lint-gradle-api-26.3.1.jar
   > Could not find gradle-api.jar (com.android.tools.build:gradle-api:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle-api/3.3.1/gradle-api-3.3.1.jar
   > Could not find databinding-compiler-common.jar (androidx.databinding:databinding-compiler-common:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/androidx/databinding/databinding-compiler-common/3.3.1/databinding-compiler-common-3.3.1.jar
   > Could not find manifest-merger.jar (com.android.tools.build:manifest-merger:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/manifest-merger/26.3.1/manifest-merger-26.3.1.jar
   > Could not find sdk-common.jar (com.android.tools:sdk-common:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/sdk-common/26.3.1/sdk-common-26.3.1.jar
   > Could not find builder-test-api.jar (com.android.tools.build:builder-test-api:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/builder-test-api/3.3.1/builder-test-api-3.3.1.jar
   > Could not find ddmlib.jar (com.android.tools.ddms:ddmlib:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/ddms/ddmlib/26.3.1/ddmlib-26.3.1.jar
   > Could not find sdklib.jar (com.android.tools:sdklib:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/sdklib/26.3.1/sdklib-26.3.1.jar
   > Could not find layoutlib-api.jar (com.android.tools.layoutlib:layoutlib-api:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/layoutlib/layoutlib-api/26.3.1/layoutlib-api-26.3.1.jar
   > Could not find dvlib.jar (com.android.tools:dvlib:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/dvlib/26.3.1/dvlib-26.3.1.jar
   > Could not find repository.jar (com.android.tools:repository:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/repository/26.3.1/repository-26.3.1.jar
   > Could not find common.jar (com.android.tools:common:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/common/26.3.1/common-26.3.1.jar
   > Could not find jetifier-processor.jar (com.android.tools.build.jetifier:jetifier-processor:1.0.0-beta02).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/jetifier/jetifier-processor/1.0.0-beta02/jetifier-processor-1.0.0-beta02.jar
   > Could not find bundletool.jar (com.android.tools.build:bundletool:0.6.0).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/bundletool/0.6.0/bundletool-0.6.0.jar
   > Could not find jetifier-core.jar (com.android.tools.build.jetifier:jetifier-core:1.0.0-beta02).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/jetifier/jetifier-core/1.0.0-beta02/jetifier-core-1.0.0-beta02.jar
   > Could not find builder-model.jar (com.android.tools.build:builder-model:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/builder-model/3.3.1/builder-model-3.3.1.jar
   > Could not find protos.jar (com.android.tools.analytics-library:protos:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/analytics-library/protos/26.3.1/protos-26.3.1.jar
   > Could not find apkzlib.jar (com.android.tools.build:apkzlib:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/apkzlib/3.3.1/apkzlib-3.3.1.jar
   > Could not find apksig.jar (com.android.tools.build:apksig:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/apksig/3.3.1/apksig-3.3.1.jar
   > Could not find annotations.jar (com.android.tools:annotations:26.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/annotations/26.3.1/annotations-26.3.1.jar
   > Could not find databinding-common.jar (androidx.databinding:databinding-common:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/androidx/databinding/databinding-common/3.3.1/databinding-common-3.3.1.jar
   > Could not find baseLibrary.jar (com.android.databinding:baseLibrary:3.3.1).
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/databinding/baseLibrary/3.3.1/baseLibrary-3.3.1.jar

* 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

BUILD FAILED in 6s

    at checkExecSyncError (child_process.js:611:11)
    at execFileSync (child_process.js:629:13)
    at runOnAllDevices (E:\Projects\ReactNative\Real\Wester\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
    at buildAndRun (E:\Projects\ReactNative\Real\Wester\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:179:41)
    at then.result (E:\Projects\ReactNative\Real\Wester\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:133:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Version:
"@react-native-community/masked-view": "^0.1.6"

Maskelement: Touchable Elements

Question

I have a MaskedView. And the maskElement gets a View with a TouchableOpacity. Is it possible to get this element touchable? Currently nothing happens and I don't want to rebuild the same component inside the MaskedView to have this element touchable.

Example MaskedView:

 <MaskedView
                   maskElement={
                            <View style={{ flex: 1, backgroundColor: 'rgba(255, 0, 255, 0.35)' }}>
                                <TouchableOpacity
                                    style={{
                                        width: 200,
                                        height: 200,
                                        transform: [{ translateX: 0 }, { translateY: 0 }],
                                        backgroundColor: 'white',
                                    }}
                                    onPress={() => alert('onrpess')}
                                >
                                    <Text style={{ zIndex: 9999, fontSize: 50, color: 'white' }}>
                                        hallofdjskafdsafs
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        }
                    >
                        <View style={{ height: 500, width: 500, backgroundColor: 'green' }}></View>
                    </MaskedView>

RN project startup spent too much time (doubt is @ the react - native - community/masked - the view, but not sure)

package.json:
dependencies: {
"@react-native-community/masked-view": "^0.1.7",
"@react-navigation/bottom-tabs": "^5.2.5",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",
"react": "16.11.0",
"react-native": "0.62.0",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.4.0"
}

I started the project using NPX react-native run-android

It takes a long time to get to this step, which is painful;
RN_11111
Sometimes I need to spend half an hour or more here

Looking forward to your Suggestions?
thank you

Could not determine the dependencies of task ':react-native-community_masked-view:generateDebugRFile'

Bug report

Summary

While using it with react-native application, the build fails for Android.

* What went wrong:
Could not determine the dependencies of task ':react-native-community_masked-view:generateDebugRFile'.
> Could not resolve all task dependencies for configuration ':react-native-community_masked-view:debugRuntimeClasspath'.
   > Could not resolve com.facebook.react:react-native:+.
     Required by:
         project :react-native-community_masked-view
      > Failed to list versions for com.facebook.react:react-native.
         > Unable to load Maven meta-data from https://jitpack.io/com/facebook/react/react-native/maven-metadata.xml.
            > Could not get resource 'https://jitpack.io/com/facebook/react/react-native/maven-metadata.xml'.
               > Could not GET 'https://jitpack.io/com/facebook/react/react-native/maven-metadata.xml'.
                  > Read timed out

Environment info

react-native info output:
System:
OS: Windows 10 10.0.17134
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 3.34 GB / 11.79 GB
Binaries:
Node: 12.18.3 - C:\node-v12.18.3\node.EXE
Yarn: 1.22.4 - C:\node-v12.18.3\yarn.CMD
npm: 6.14.6 - C:\node-v12.18.3\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.0
System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6514223
Visual Studio: Not Found
Languages:
Java: Not Found
Python: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
react-native: Not Found

# paste it here

Library version: 0.1.10

Steps to reproduce

  1. run react-native run-android

Describe what you expected to happen:

  1. The application runs on the simulator/device

Reproducible sample code

Is it possible to have dynamic Text in maskElement

If I change the text in the given example from 'Basic Mask' to something which changes with the state for example:

<Text>{${this.state.remainingTime} Seconds}</Text>

And at some interval I change this state, then the mask's text should change. But its not happening. Is this not supported or is that a bug ?

Thanks

./grandlew assembleDebug, error RNCMaskedViewPackage is not abstract and does not override abstract method createJSModules()

Bug

Have this error when i run "./grandlew assembleDebug"

..../node_modules/@react-native-community\masked-view\android\src\main\java\org\reactnative\maskedview\RNCMaskedViewPackage.java:13: error: RNCMaskedViewPackage is not abstract and does not override abstract method createJSModules() in ReactPackage
public class RNCMaskedViewPackage implements ReactPackage {
1 error

Environment info

React native info output:

System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
    Memory: 6.24 GB / 15.91 GB
  Binaries:
    Node: 10.16.2
    Yarn: 1.21.1
    npm: 6.9.0
  IDEs:
    Android Studio: Version  3.4.0.0 AI-183.6156.11.34.5692245
react-native-community/masked-view 0.1.6 version
react-native version 3.0.4
sdkVersion 36.0.0

Steps To Reproduce

  1. Execute ./grandlew assembleDebug

Describe what you expected to happen:

Compile

Gradle issue

I created a new project 0.63.3. When I run the command npx react-native run-android throws this error.

$ npx react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1076 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
adb server version (41) doesn't match this client (40); killing...
* daemon started successfully
info Installing the app...
> Task :react-native-community_masked-view:compileDebugJavaWithJavac FAILED

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

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-community_masked-view:compileDebugJavaWithJavac'.
> Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.

* 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

BUILD FAILED in 8s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

this is my setup

$ npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Memory: 195.00 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /Users/aerik/.rvm/rubies/ruby-2.7.1/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29, 30
      Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.0, 29.0.2, 30.0.2
      System Images: android-22 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6858069
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_121 - /usr/bin/javac
    Python: 3.8.3 - /Users/aerik/anaconda3/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Any advice? Thanks.

Error building for Android - package android.support.annotation does not exist

Bug

Compilation error on version 0.1.1
node_modules/@react-native-community/masked-view/android/src/main/java/org/reactnative/maskedview/RNCMaskedViewManager.java:3: error: package android.support.annotation does not exist
import android.support.annotation.Nullable;
^
1 error

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':@react-native-community_masked-view:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 10.15
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 330.52 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 26, 28
      Build Tools: 23.0.1, 26.0.2, 28.0.3
      System Images: android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
  IDEs:
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Library version: 0.1.1

Steps To Reproduce

  1. Build for Android
    ...

Describe what you expected to happen:

  1. Use the library without issues

Task :react-native-community_masked-view:generateDebugRFile FAILED

dependency version: @react-native-community/masked-view": "^0.1.10

error:

Task :react-native-community_masked-view:generateDebugRFile FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings
90 actionable tasks: 6 executed, 84 up-to-date

FAILURE: Build failed with an exception.

  • What went wrong:
    Execution failed for task ':react-native-community_masked-view:generateDebugRFile'.

java.util.NoSuchElementException (no error message)

  • 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

BUILD FAILED in 25s

log:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'android:beta',
1 verbose cli '--scripts-prepend-node-path=auto'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preandroid:beta', 'android:beta', 'postandroid:beta' ]
5 info lifecycle [email protected]preandroid:beta: [email protected]
6 verbose lifecycle [email protected]
preandroid:beta: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]preandroid:beta: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Projects\mobile_react_native\node_modules.bin;C:\Python27;C:\Python27\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\HashiCorp\Vagrant\bin;C:\Program Files\Git\cmd;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs;C:\Program Files\Java\jdk1.8.0_211\bin;C:\Android\tools\bin\platform-tools;C:\Program Files (x86)\Yarn\bin;C:\Users\PB\AppData\Local\Microsoft\WindowsApps;C:\Users\PB\AppData\Roaming\npm;C:\Android\tools\bin\platform-tools;C:\Users\PB\AppData\Local\Yarn\bin
8 verbose lifecycle [email protected]
preandroid:beta: CWD: C:\Users\Projects\mobile_react_native
9 silly lifecycle [email protected]preandroid:beta: Args: [ '-c', 'npm run updateOn' ]
10 silly lifecycle [email protected]
preandroid:beta: Returned: code: 0 signal: null
11 info lifecycle [email protected]android:beta: [email protected]
12 verbose lifecycle [email protected]
android:beta: unsafe-perm in lifecycle true
13 verbose lifecycle [email protected]android:beta: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Projects\mobile_react_native\node_modules.bin;C:\Python27;C:\Python27\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\HashiCorp\Vagrant\bin;C:\Program Files\Git\cmd;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs;C:\Program Files\Java\jdk1.8.0_211\bin;C:\Android\tools\bin\platform-tools;C:\Program Files (x86)\Yarn\bin;C:\Users\PB\AppData\Local\Microsoft\WindowsApps;C:\Users\PB\AppData\Roaming\npm;C:\Android\tools\bin\platform-tools;C:\Users\PB\AppData\Local\Yarn\bin
14 verbose lifecycle [email protected]
android:beta: CWD: C:\Users\Projects\mobile_react_native
15 silly lifecycle [email protected]android:beta: Args: [
15 silly lifecycle '-c',
15 silly lifecycle 'react-native run-android --variant=betaDebug --appIdSuffix=beta'
15 silly lifecycle ]
16 silly lifecycle [email protected]
android:beta: Returned: code: 1 signal: null
17 info lifecycle [email protected]~android:beta: Failed to exec android:beta script
18 verbose stack Error: [email protected] android:beta: react-native run-android --variant=betaDebug --appIdSuffix=beta
18 verbose stack Exit status 1
18 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
18 verbose stack at EventEmitter.emit (events.js:315:20)
18 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
18 verbose stack at ChildProcess.emit (events.js:315:20)
18 verbose stack at maybeClose (internal/child_process.js:1051:16)
18 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
19 verbose pkgid [email protected]
20 verbose cwd C:\Users\Projects\mobile_react_native
21 verbose Windows_NT 10.0.19041
22 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "android:beta" "--scripts-prepend-node-path=auto"
23 verbose node v14.4.0
24 verbose npm v6.14.5
25 error code ELIFECYCLE
26 error errno 1
27 error [email protected] android:beta: react-native run-android --variant=betaDebug --appIdSuffix=beta
27 error Exit status 1
28 error Failed at the [email protected] android:beta script.
28 error This is probably not a problem with npm. There is likely additional logging output above.
29 verbose exit [ 1, true ]

Invariant Violation: requireNativeComponent: "RNCMaskedView" was not found in the UIManager.

Unhandled JS Exception: Invariant Violation: Invariant Violation: requireNativeComponent: "RNCMaskedView" was not found in the UIManager.

This error is located at:
    in RNCMaskedView (at MaskedView.ios.js:73)

I keep getting this error when using the community version. But when I used the Deprecated MaskedViewIOS it works.

I've done react-native link @react-native-community/masked-view successfully. So not sure what's wrong

Versions:

  • @react-native-community/masked-view: ^0.0.5
  • react: 16.8.3
  • react-native: 0.59.8

[HELP] Trying to use Flatlist items as a mask for a linear gradient.

I am trying to mask Flatlist elements using linear gradient as shown in the image below. The text on the "message bubbles" are not rendering. I was able to make the flatlist scrollable by going into MaskedView.js and making pointerEvents to "auto". I am using the Flatlist as the maskElement, and a LinearGradient (expo-linear-gradient) as the child. Let me know of any ideas please. Another option I am considering is using gl-react for this, however I want to see if I can simply fix the text not showing up using this library. Thanks!

image

Apk release crash on Android 4.4.4 real device when launching

Bug

I release the production of my apk, and when i try to open it, it crash.
I check my logs in adb if found this:

E/dalvikvm(31836): Could not find class 'org.reactnative.maskedview.RNCMaskedViewPackage', referenced from method com.facebook.react.PackageList.getPackages
E/AndroidRuntime(31836): FATAL EXCEPTION: main
E/AndroidRuntime(31836): Process: com.redapp, PID: 31836
E/AndroidRuntime(31836): java.lang.NoClassDefFoundError: org.reactnative.maskedview.RNCMaskedViewPackage       
E/AndroidRuntime(31836):        at com.facebook.react.PackageList.getPackages(PackageList.java:100)
E/AndroidRuntime(31836):        at com.redapp.MainApplication$1.getPackages(MainApplication.java:26)
E/AndroidRuntime(31836):        at com.facebook.react.ReactNativeHost.createReactInstanceManager(ReactNativeHost.java:76)
E/AndroidRuntime(31836):        at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:38)
E/AndroidRuntime(31836):        at com.facebook.react.ReactDelegate.loadApp(ReactDelegate.java:103)
E/AndroidRuntime(31836):        at com.facebook.react.ReactActivityDelegate.loadApp(ReactActivityDelegate.java:88)
E/AndroidRuntime(31836):        at com.facebook.react.ReactActivityDelegate.onCreate(ReactActivityDelegate.java:83)
E/AndroidRuntime(31836):        at com.facebook.react.ReactActivity.onCreate(ReactActivity.java:44)
E/AndroidRuntime(31836):        at android.app.Activity.performCreate(Activity.java:5447)
E/AndroidRuntime(31836):        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1094) 
E/AndroidRuntime(31836):        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2393)  
E/AndroidRuntime(31836):        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2493)   
E/AndroidRuntime(31836):        at android.app.ActivityThread.access$800(ActivityThread.java:166)
E/AndroidRuntime(31836):        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1283)        
E/AndroidRuntime(31836):        at android.os.Handler.dispatchMessage(Handler.java:102)
E/AndroidRuntime(31836):        at android.os.Looper.loop(Looper.java:136)
E/AndroidRuntime(31836):        at android.app.ActivityThread.main(ActivityThread.java:5590)
E/AndroidRuntime(31836):        at java.lang.reflect.Method.invokeNative(Native Method)
E/AndroidRuntime(31836):        at java.lang.reflect.Method.invoke(Method.java:515)
268)
E/AndroidRuntime(31836):        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1084)
E/AndroidRuntime(31836):        at dalvik.system.NativeStart.main(Native Method)
E/android.os.Debug(  597): !@Dumpstate > sdumpstate -k -t -z -d -m 31836 -o /data/log/dumpstate_app_error      
E/WindowManager(  597): Starting window AppWindowToken{42e3b5f8 token=Token{432e6e20 ActivityRecord{433179f0 u0 com.redapp/.MainActivity t33}}} timed out

Environment info

react-native info output:

 System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Xeon(R) CPU           W3530  @ 2.80GHz
    Memory: 720.66 MB / 6.00 GB
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 19, 26, 28, 29
      Build Tools: 28.0.3, 29.0.0, 29.0.2
      System Images: android-26 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: Version  3.4.0.0 AI-183.6156.11.34.5522156
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.61.5 => 0.61.5

Library version: 0.1.7

Steps To Reproduce

...

Describe what you expected to happen:

  1. I create the release version of my apk by using ./gradlew app:assembleRelease
  2. I install it in my device "Samsung galaxy Tab E"
  3. It show an alert tell me that the app it stopped

Reproducible sample code

I don't use the plugin, but it seems that react-navigation use it

There is my package.json

{
    "name": "myapp",
    "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": {
        "@expo/vector-icons": "^10.0.6",
        "@react-native-community/async-storage": "^1.7.1",
        "@react-native-community/datetimepicker": "2.2.2",
        "@react-native-community/masked-view": "^0.1.7",
        "@react-native-community/netinfo": "^5.3.2",
        "axios": "^0.19.1",
        "constate": "^1.3.2",
        "formik": "^2.1.1",
        "haversine": "^1.1.1",
        "lodash": "^4.17.15",
        "moment": "^2.24.0",
        "path": "^0.12.7",
        "query-string": "^6.9.0",
        "react": "16.8.6",
        "react-native": "0.61.5",
        "react-native-android-location-enabler": "^1.2.1",
        "react-native-camera": "git+https://[email protected]/react-native-community/react-native-camera.git",
        "react-native-datepicker": "^1.7.2",
        "react-native-dropdownalert": "4.2.0",
        "react-native-elements": "^1.2.7",
        "react-native-geolocation-service": "^4.0.0",
        "react-native-gesture-handler": "^1.5.3",
        "react-native-get-imei": "^1.0.1",
        "react-native-image-picker": "^2.3.1",
        "react-native-imei": "^0.2.0",
        "react-native-linear-gradient": "^2.5.6",
        "react-native-maps": "^0.26.1",
        "react-native-permissions": "^2.0.10",
        "react-native-picker-select": "^6.5.1",
        "react-native-qrcode-scanner": "^1.4.0",
        "react-native-reanimated": "^1.4.0",
        "react-native-responsive-ui": "^2.1.1",
        "react-native-safe-area-context": "^0.6.2",
        "react-native-safe-area-view": "^1.0.0",
        "react-native-screens": "^2.0.0-alpha.22",
        "react-native-spinkit": "^1.5.0",
        "react-native-svg": "^10.0.0",
        "react-native-tab-view": "^2.11.0",
        "react-native-table-component": "^1.2.1",
        "react-native-unimodules": "^0.7.0",
        "react-native-vector-icons": "^6.6.0",
        "react-navigation": "^4.0.10",
        "react-navigation-drawer": "^2.3.3",
        "react-navigation-stack": "^2.0.6",
        "yup": "^0.28.0"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/runtime": "^7.6.2",
        "@react-native-community/eslint-config": "^0.0.5",
        "babel-jest": "^24.9.0",
        "babel-plugin-module-resolver": "^4.0.0",
        "eslint": "^6.5.1",
        "eslint-config-airbnb": "^18.0.1",
        "eslint-config-airbnb-base": "^14.0.0",
        "eslint-import-resolver-typescript": "^2.0.0",
        "eslint-plugin-flowtype": "^4.5.3",
        "eslint-plugin-import": "^2.19.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-react-hooks": "^2.3.0",
        "eslint-plugin-react-native": "^3.8.1",
        "jest": "^24.9.0",
        "metro-react-native-babel-preset": "^0.56.4",
        "react-native-typescript-transformer": "^1.2.13",
        "react-test-renderer": "16.9.0",
        "typescript": "^3.7.4"
    },
    "jest": {
        "preset": "react-native"
    }
}

Thanks

Mask'ed' element disappears if height is too large (Android Only)

Bug report

Summary

Probably crazy, and this is working perfectly on iOS, but when I run on android my masked element (a block of color) disappears entirely if I make the height greater than 731. That's an insanely arbitrary number but I was wondering if anyone else ran into something similar?

Environment info

System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i7-4558U CPU @ 2.80GHz
    Memory: 21.32 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: Not Found
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /Users/James/.rvm/rubies/ruby-2.6.3/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 27.0.3, 28.0.2, 28.0.3
      System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_144 - /usr/bin/javac
    Python: 2.7.10 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: ^0.1.10

Reproducible sample code

<View
style={{
  position:'absolute',
  width:deviceWidth,
  height:1000,
}}>
  <MaskedView
    maskElement={
      <Image 
        source={curve} 
        style={{
          width: deviceWidth,
          height: 1000,
        }} 
      />
    }
  >
    <View 
      style={{
        backgroundColor:'red',
        width: deviceWidth,
        height: 731, //<< if I change this to 732, the view disappears entirely.
      }}
    />
  </MaskedView>
</View>

index.js file missing from node_modules\@react-native-community\masked-view after installation.

I am getting this below error while building react-native app. @react-native-community/masked-view and @react-navigation\stack are up to date but not sure why this package is not being resolved while building.

error: Error: While trying to resolve module `@react-native-community/masked-view` from file `C:\..\..\node_
modules\@react-navigation\stack\src\views\MaskedViewNative.tsx`, the package `C:\..\..\node_modules\@react-n
ative-community\masked-view\package.json` was successfully found. However, this package itself specifies a `main` module
 field that could not be resolved (`C:\..\..\node_modules\@react-native-community\masked-view\index.js`. Indeed, none of these files exist:


my package.json 

{
  "name": "appname",
  "version": "0.0.1",
  "private": true,
  "scripts": {
   ..
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-firebase/app": "^8.4.6",
    "@react-native-firebase/auth": "^9.3.1",
    "@react-native-firebase/firestore": "^7.8.7",
    "@react-native-firebase/functions": "^7.4.9",
    "@react-native-firebase/storage": "^7.4.10",
    "@react-navigation/bottom-tabs": "5.10.2",
    "@react-navigation/drawer": "5.10.2",
    "@react-navigation/material-top-tabs": "5.3.2",
    "@react-navigation/native": "5.8.2",
    "@react-navigation/stack": "5.11.1",
    "@reduxjs/toolkit": "^1.4.0",
    "axios": "^0.19.2",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-animatable": "^1.3.3",
    "react-native-fast-image": "^8.3.2",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-global-props": "^1.1.5",
    "react-native-keyboard-aware-scroll-view": "^0.9.2",
    "react-native-paper": "^4.0.1",
    "react-native-reanimated": "^1.10.1",
    "react-native-safe-area-context": "^3.1.1",
    "react-native-screens": "^2.9.0",
    "react-native-spinkit": "^1.5.0",
    "react-native-vector-icons": "^7.0.0",
    "react-redux": "^7.2.1"
  },
  "devDependencies": {
    ...
  },
  "jest": {
    "preset": "react-native"
  }
}

Temporary solution:

I have tried uninstalling @react-native-community/masked-view a few times. I have tried deleting node modules folder, clearing cache using commands like npm cache clean --force, react-native start --reset-cache but nothing worked so far.

Then I realized @react-native-community/masked-view package is missing index.js file from installation.

I copied js folder and index.js file from another project for @react-native-community/masked-view and project starts building again.

image

I am not sure why this folder and index file is missing from the installation itself.

Any help on this issue is much appreciated.
note: I opened up this issue on stackoverflow before finding temp solution.

Crashed app after install module on Android

This is detail of my add:
"react": "16.9.0",
"react-native": "0.61.5",

after install newest version "0.1.10" and run "npx react-native run-android" my app is crashed on start.

[iOS] Build fails with error duplicate symbols for architecture x86_64

ExpoKit iOS build error: duplicated symbols for architecture x86_64

🐛 Bug Report

https://github.com/pedro-lb/expokit-duplicated-symbols

Environment

pedrobini@Pedros-MacBook-Pro ios % expo diagnostics 

  Expo CLI 3.11.7 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.12.0 - /usr/local/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.11.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
      Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
    npmGlobalPackages:
      expo-cli: 3.11.7

Target: iOS

Steps to Reproduce

Clone our repo that reproduces the problem:

git clone https://github.com/pedro-lb/expokit-duplicated-symbols

Follow setup guide:

  • Run yarn install.
  • Go into ios directory and run pod install: cd ios && pod install.
  • Start the expo server with yarn start --clear.
  • Open the project in XCode, click Build (or hit ⌘ + B).

You should hit the error: duplicate symbols for architecture x86_64.

Expected Behavior

The app builds successfully and works.

Actual Behavior

Build error when trying to build for iOS:

image

ld: 90 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

You can find the full build error here.

Reproducible Demo

https://github.com/pedro-lb/expokit-duplicated-symbols

Solutions already attempted:

We've tried a few fixes as listed below.

❌ Upgrading to XCode 10's new build system:

Yeah, we're late to the party and still using the old build system. Although when trying to use the new one, the same error still happens and it doesn't build.

ld: 90 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Manually removing conflics in Podfile:

We've tried to manually remove conflicting links on a post-install hook in our Podfile. The script looks as below.

The links were removed but that solution does not work. Same error happens (duplicate symbols for architecture x86_64).

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if %w(RNScreens RNCMaskedView react-native-safe-area-context).include?(target.name)
      target.remove_from_project
    end
  end
end

❌ Disabling autolink for conflicting dependencies on react-native.config.js:

By disabling React Native's autolink for the conflicting dependencies in react-native.config.js file, the project still does not build, and a new error appears.

module.exports = {
  dependencies: {
    ...,
    '@react-native-community/masked-view': {
      platforms: {
        ios: null,
      },
    },
    'react-native-safe-area-context': {
      platforms: {
        ios: null,
      },
    },
    'react-native-screens': {
      platforms: {
        ios: null,
      },
    },
  },
};

A new error happens when trying to build:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Removing conflicting dependencies from package.json:

By removing the conflicting dependencies below from package.json and re-installing our modules and pods (by running the commands below).

yarn remove @react-native-community/masked-view react-native-screens react-native-safe-area-context

rm -rf node_modules yarn.lock

yarn install

cd ios

rm -rf Podfile.lock Pods

pod install

> build on XCode

On this repository, the project builds and works correctly! But I guess this happens since we don't really use these dependencies here (they were just installed via yarn add). On our project another error happens during build, since we actually import and use these dependencies:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Tinkering with XCode build settings:

We've tried to change a few XCode build settings as mentioned in a few Stack Overflow posts, but none of them worked.

  • ❗ Removing -ObjC flag Other Linker Flags in XCode Build Settings: It builds! But doesn't work as stated in its topic below.
  • 😵 Setting No Common Blocks to NO under Build Settings.
  • 😵 Setting Enable Testability to NO under Build Settings.
  • 😵 Running in production and debug modes.
  • 😵 Removing Link Binary with Libraries under Build Phases.
  • 😵 Removing duplicated (there were none) items in Compile Sources under Build Phases.
  • 😵 Removing duplicated (there were none) libraries in Libraries folder in XCode.

❓ Removing -ObjC flag in Other Linker Flags under XCode's Build Settings:

By removing -ObjC flag from Other Linker Flags (located in Build Settings) on XCode, the project builds!

...but it immediately force-closes after opening 😞. The error below pops up.

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[RCTRootView setReactTag:]: unrecognized selector sent to instance 0x7f84f6e10f40'
terminating with uncaught exception of type NSException
abort() called
CoreSimulator 681.17.2 - Device: iPhone 11 (0974E59B-9AA8-4E0B-915D-A083AB917955) - Runtime: iOS 13.3 (17C45) - DeviceType: iPhone 11

When looking at the exception that caused the app to crash with Mac OS console:

2020-01-17 14:35:13.414 [info][tid:main][RCTBridge.m:145] Class EXDisabledRedBox was not exported. Did you forget to use RCT_EXPORT_MODULE()?

Apparently, -ObjC is necessary to correctly build all the dependencies.

❌ Add React dependencies to Podfile:

When seeing the error above, while still without -ObjC flag in Other Linker Flags under XCode's Build Settings, we've tried adding the missing pods as described above (Did you forget to use RCT_EXPORT_MODULE()?) in our Podfile:

  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

and we've also tried with:

pod 'React',
    :path => "../node_modules/react-native",
    :inhibit_warnings => true,
    :subspecs => [
      "Core",
      "ART",
      "RCTActionSheet",
      "RCTAnimation",
      "RCTCameraRoll",
      "RCTGeolocation",
      "RCTImage",
      "RCTNetwork",
      "RCTText",
      "RCTVibration",
      "RCTWebSocket",
      "DevSupport",
      "CxxBridge"
    ]

After running rm -rf Podfile.lock Pods && pod install, we've tried to build, but the same error happens.

2020-01-17 14:35:13.414 [info][tid:main][RCTBridge.m:145] Class EXDisabledRedBox was not exported. Did you forget to use RCT_EXPORT_MODULE()?

Task :react-native-community_masked-view:mergeReleaseGeneratedProguardFiles FAILED

Bug

Hi, it makes it impossible to compile my application for Android with "assembleRelease", I tried to redo a project but same problem.

Error :

> Task :react-native-community_masked-view:mergeReleaseGeneratedProguardFiles FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-community_masked-view:mergeReleaseGeneratedProguardFiles'.
> Collection contains no element matching the predicate.

Environment info

react-native info output:

 System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 465.12 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - /usr/local/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 0.1.10

Steps To Reproduce

  1. react-native init project
  2. install React Navigation (https://reactnavigation.org/docs/getting-started)
  3. cd android
  4. ./gradlew assembleRelease

And error.

[Android] - Doesn't handle correctly Images as mask

Bug

If you are using Images in the maskElement, it won't load it, like if it doesn't update the ImageView cache. but if I use it once. But then, if I do a Fast Refresh of React native. it will shows up.

So basically if I want this to work, I have to:

  • Create a "Dummy MaskedView" which will have all the image masks I'm using. so it can load in the cache.
  • Put the dummy in my fist screen (Which doesn't contain any MaskedView in its rendering)

and now, when I'm navigating to another screen with MaskedView, it will works as it should. This temporary fix only works with local images, URI just dont work with MaskedView

Environment info

Fresh project with nothing but masked-view
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

Tested on :

  • Pixel 3X 28 API - EMULATOR
  • S7 23 & 24 API - EMULATOR
  • S9 + 29 API - PHYSICAL

React native info output: N/A

Library version: "@react-native-community/masked-view": "^0.1.7"

Steps To Reproduce

  1. Use in maskElement
  2. First run the app
  3. then R-R (reload) or quick refresh

Describe what you expected to happen:

  1. Render bottom mask which make a fading effect.

Reproducible sample code

Git Example

Add web stub for this package

Feature request

It would be nice to add a web stub implementation for this package based on react-native-web

Possible implementation

I haven't dived in much how the actual implementation can be, however, a stub based on normal <View /> could be suffice I suppose.

Code sample

export function MaskedViewWeb({ maskElement: _ /* Not used */, ...props }: MaskedViewProps) {
  return <View {...props} />;
}

Android - Elevation style not working on elements rendered inside MaskedView

Bug

I'm trying to render a scroll view inside a MaskedView with LinearGradient as a maskElement.. On Android all elements with elevation style lose their shadow..

Environment info

 System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 426.71 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.0, 28.0.1, 28.0.2, 28.0.3, 29.0.0, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    @react-native-community/cli: ^2.6.2 => 2.6.2 
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.3 => 0.60.3 
  npmGlobalPackages:
    react-native-create-library: 3.1.2

Library version: 0.1.1

Steps To Reproduce

  1. Use MaskedView with LinearGradient element as mask and render inside a view with elevation.

Describe what you expected to happen:

  1. The view inside MaskedView will have a shadow due to the elevation style.

Reproducible sample code

<MaskedView
      maskElement={(
        <LinearGradient
          style={{ height: 200, width: 200 }}
          colors={['transparent', 'white']}
          locations={[0.01, 0.06]}
        />
      )}
>
    <View style={{ width: 100, height: 100, elevation: 5, backgroundColor: 'red'  }} />
</MaskedView>

'RCTUIManager.h' file not found

Getting this issue on line 11 of RNCMaskedViewManager.m. Deleting this line works, and the build succeeds.

Versions:

  • react-native: 0.59.0
  • @react-native-community/masked-view: ^0.0.1
  • react: 16.8.3

Podspec install errors: no tag/branch for package version

Bug

I just tried to add this library to my project, and in the Podfile I added pod 'RNCMaskedView', :podspec => '../node_modules/@react-native-community/masked-view/RNCMaskedView.podspec'. When running pod install, I get the following error:

[!] Error installing RNCMaskedView
[!] /usr/local/bin/git clone https://github.com/react-native-community/react-native-masked-view.git /var/folders/70/58j390s50ms671frlskkd_9r0000gn/T/d20190724-13772-pjtr1t --template= --single-branch --depth 1 --branch v0.1.1

...
warning: Could not find remote branch v0.1.1 to clone.
fatal: Remote branch v0.1.1 not found in upstream origin

With further research, I confirmed this error will show if the tag is missing as well.

I found #10 which changed the Podspec to look for a tag with the current version, which should be correct, but this repo does not have versioned tags or branches at the moment, so I'm unsure how this is intended to work.

Workaround

Instead of the above line in the Podfile, you can use pod 'RNCMaskedView', :path => '../node_modules/@react-native-community/masked-view'. Using :path instead of the podspec will install from the on-disk copy, but this is only intended for when you're locally developing on a pod dependency simultaneously.

Environment info

React native info output:

  React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
      Memory: 1.53 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.1.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    IDEs:
      Android Studio: 3.4 AI-183.5429.30.34.5452501
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-macos-cli: 2.0.1

Library version: 0.1.1

Steps To Reproduce

  1. Add react-native-masked-view to a Podfile-based react-native project
  2. Add pod 'RNCMaskedView', :podspec => '../node_modules/@react-native-community/masked-view/RNCMaskedView.podspec' to Podfile
  3. Run pod install

Describe what you expected to happen:

Library installed without errors.

Impossible to update a dynamic Text

Hello,

I have a progress bar so i use MaskedView for change the color of my text following the progress bar.

It work well on iOS, but on Android my text dont change.

This issue is quit the same as this one : #19

It says that the issue is closed because 'this issue has been resolved in the newest release' but i still have this problem so do you have any solution ?

Thank you

[v2] Combining repeat, delay and withTiming causes application to crash

Bug report

Summary

I am trying to achieve slideshow like animation where slide changes every 3 seconds. To do so I tried to utalise repeat, delay and withTiming together.

This correctly triggers animation first time, but as soon as repeat loop begins it crashes, in my case to XCode highlight following line in app/app/main.m

// Error Thread 1: signal SIGABRT
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));

Environment info

react-native info output:

System:
    OS: macOS 10.15.6
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 10.76 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.0
      System Images: android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: x.x.x

Steps to reproduce

  1. See "Reproducible sample code section"

Describe what you expected to happen:

  1. When component mounts, it waits 3000ms before starting first animation
  2. Animation value changes to 0
  3. After another 3000ms animation value changes to 1
  4. This repeats Infinity times

Reproducible sample code

const animation = useSharedValue(1);

const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: animation.value
    };
  });

 useEffect(() => {
    animation.value = repeat(
      delay(
        3000, 
        withTiming(0, { duration: 300 })
      ),
      Infinity, 
      true
    );
  }, [animation]);

After v0.2.0 upgrade: Invariant Violation => Rename RNCMaskedView to RNMaskedView

This issue prevents me from using react-native-masked-view v0.2.0 because I can't run this and v0.1.10 in parallel, while the latter is a peer dependency for @react-navigation/stack ("@react-native-community/masked-view": ">= 0.1.0" that is). Installing both yields the following error which makes sense:

Invariant Violation: Tried to register two views with the same name RNCMaskedView

This could be avoided by renaming RNCMaskedView to RNMaskedView, which makes more sense anyway, since the RNC stood for @react-native-community and this is not under the RNC umbrella anymore.

MaskedView support for Android


This issue was originally created by @iljadaderko as facebook/react-native#19546.


For Discussion

I've worked on view demonstrated below today, very pleasant experience while using MaskedViewIOS
In essence it masks Orc graphic with that dark cloud / smoky mask. On android however, I was not able to find anything similar from community and after 3h of trying to create a native component bridge for this, I came nowhere close :/

Hence I wanted to start this discussion, shall we make MaskedView more general and support it for Android as well, or are there some limitations that don't allow this (hence only IOS implementation at the moment?)

screen shot 2018-06-03 at 14 55 47

Set BackgroundColor of maskElement

Feature Request

Currently you can only have the white backgroundColor of the maskElement. It would be nice, if you could change the color.

Code sample

Try the example. You can see that it get's the white backgroundColor. It's only possible to change the alpha-value.

Task :react-native-community_masked-view:javaPreCompileDebug FAILED

Bug report

Summary

Some hours ago my code was running perfectly fine on both android and ios. Now, I got some problems only on android. IOS works perfectly fine.

The error I've got :
Task :react-native-community_masked-view:javaPreCompileDebug FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

Note: I am using Gradle-6.5-all.zip

Environment info

react-native info output:

System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 166.99 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
Languages:
Java: 14.0.1 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Library version: 0.1.10

Steps to reproduce

  1. react-native init project
  2. npm install react-navigation
  3. react-native run-android

Describe what you expected to happen:

  1. app to run fine.

Reproducible sample code

React-Native app not running

I created a react-native app in my system and I upload it on git and send a link to my friend but that app not working in his system I also run npm install cmd but still getting the same issue. I'm using ubuntu and he is using windows maybe this is the reason of error, Please help me to solve this issue.

The error is...

C:\Users\shiv\Desktop\prabhubhakti>react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 1340 file(s) to forward-jetify. Using 4 workers...info JS server already running.info Launching emulator...error Failed to launch emulator. Reason: Could not start emulator within 30 seconds..warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.info Installing the app...> Task :@react-native-community_masked-view:generateDebugBuildConfig FAILED2 actionable tasks: 2 executedFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':@react-native-community_masked-view:generateDebugBuildConfig'.> java.io.IOException: Unable to delete directory C:\Users\shiv\Desktop\prabhubhakti\node_modules@react-native-community\masked-view\android\build\generated\source\buildConfig\debug\org.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get morelog output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4m 24serror Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':@react-native-community_masked-view:generateDebugBuildConfig'.> java.io.IOException: Unable to delete directory C:\Users\shiv\Desktop\prabhubhakti\node_modules@react-native-community\masked-view\android\build\generated\source\buildConfig\debug\org.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get morelog output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4m 24s    at checkExecSyncError (child_process.js:616:11)    at execFileSync (child_process.js:634:13)    at runOnAllDevices (C:\Users\shiv\Desktop\prabhubhakti\node_modules@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)ReplyForward   ReplyForward    
  ReplyForward

Android render not correctly

Bug

I'm trying to create view like this https://i.imgur.com/q2NMUOQ.jpg . Please check the comment section. It has gradient opacity at top.
So, I'm doing it like this :

<View style={{ backgroundColor: '#abcdef' }}
<MaskedView
      maskElement={(
        <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,1)']} style={{
              flex: 1,
            }} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} locations={[0,0.5]} />
      )}
>
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
..........
    <View style={{ width: 100, height: 40, elevation: 5, backgroundColor: 'red'  }} />
</MaskedView>
</View>

It works fine on ios but wrong on android. Please check screenshot
https://i.imgur.com/zZpPSzs.png

On android, it black at bottom. How to remove it ?
Thank you

Environment info

React native info output:

 info
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 46.73 MB / 32.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.16.0 - /usr/local/bin/node
      Yarn: 1.17.3 - /usr/local/bin/yarn
      npm: 6.10.2 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 24, 26, 27, 28, 29
        Build Tools: 27.0.3, 28.0.3, 29.0.1
        System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.9 => 0.59.9
    npmGlobalPackages:
      react-native-cli: 2.0.1

Library version: "@react-native-community/masked-view": "^0.1.1"

Masked Views keep refreshing themselves

It should be noted that this may introduce lag on low end devices.

Reproduce this for yourself:
On Android, create a Masked View, then enable HWUI profiling and see the spam

Gradle build errors out on :app:mergeDexRelease

Execution failed for task ':app:mergeDexRelease'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
   > com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
     Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes.
     Type org.reactnative.maskedview.BuildConfig is defined multiple times: /home/naomi/Sorgenti/react-native/RevengeOTA-test/node_modules/@react-native-community/masked-view/android/build/.transforms/343d51df17c6862f87ba146c4f5995dc/classes/classes.dex, /home/naomi/Sorgenti/react-native/RevengeOTA-test/node_modules/@react-native-masked-view/masked-view/android/build/.transforms/2d544cf4b9bd375c9ee2e5d801e1b4d1/classes/classes.dex

using RN 0.63... I also cleaned everything idk what's it really

Add git tags

Feature request

Your RNCMaskedView.podspec file references a git tag version yet the repository itself has no tags:

{ :git => "https://github.com/react-native-community/react-native-masked-view.git", :tag => "v#{s.version}" }

Why it is needed

To offer the ability to add the library as an independent Cocoapod. At the moment this fails as the podspec specifies a tag which doesn't exist in git

Possible implementation

Tag each release and push to git. E.g.

git tag -a <tag_name>
git push origin <tag_name>

No License

Hello, I'm including this module in a project at my work and I noticed that there is no license. Is that on purpose?

0.1.8 Changelog

Hi!

I realized that there is a new version is available at NPM, but I didn't find any changelog or note for that version. Can you add it to the repository?

Thanks!

ScrollView is not working inside maskElement

`<MaskedView
        style={styles.container}
       maskElement={
      <View
        style={[
          {
            flex: 1,
            display: 'flex',
            backgroundColor: 'white',
          },
        ]}>
        <ScrollView
          contentContainerStyle={{padding: 10}}
          style={{
            flex: 1,
            width: '100%',
            borderColor: 'red',
            borderWidth: 1,
          }}>
          {this.state.data.map(item => {
            return (
              <Animated.View
                key={item.id}
                style={[
                  styles.box,
                  {
                    // transform: [
                    //   {
                    //     scale: this.state.animations
                    //       ? this.state.animations[item.id].scale
                    //       : 0,
                    //   },
                    // ],
                    opacity: this.state.animations
                      ? this.state.animations[item.id].scale
                      : 0,
                  },
                ]}
              />
            );
          })}
        </ScrollView>

        <Animated.View
          style={[
            styles.floatButton,
            {
              transform: [
                {
                  scale: this.state.scale,
                },
              ],
              opacity: this.state.opacityFade,
              //   backgroundColor: this.state.done ? 'transparent' : 'blue',
            },
          ]}
        />
      </View>
    }>
    <Animated.View
      style={{
        flex: 1,
        opacity: this.state.opacityView,
      }}>
      <Details visible={!this.state.started} onPress={this.animateButton} />
    </Animated.View>
  </MaskedView>`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.