profile
viewpoint

issue closedsoftware-mansion/react-native-gesture-handler

Android: Dragging stop working if the item swings back to its original position

There is a simple drag animation in my React Native 0.62.2 app. The drag is implemented with react-native-gesture-handler 1.6.1 and react-native-reanimated 1.10.1. The dragged item is an image in a grid. There are 2 grid or 3 grids in a row to display images. Here is the code:

        const dragX = new Value(0);
        const dragY = new Value(0);
        const state = new Value(-1);
        const handleGesture = event([
            {
              nativeEvent: {
                translationX: dragX,
                translationY: dragY,
                state,
              },
            }, 
          ]);
        let aniStyle = {
            transform:[
                { translateY : dragY },
                { translateX : dragX }
            ]
        };
        return (
          <PanGestureHandler 
               onGestureEvent={handleGesture} 
               onHandlerStateChange={handleGesture}>
             //image item goes here
          </PanGestureHandler>
        )

There is no offset defined so image will swing back to its original position with 2nd or late drags before moving along with the cursor. After first drag, I notice when the image is clicked, the image swings back to its original position and, stops responding to any further drag. Also if the image item is initially clicked, then drag will not work at all. Is it a bug?

closed time in 3 days

emclab

issue openedsoftware-mansion/react-native-gesture-handler

Android: Dragging stop working if the item swings back to its original position

There is a simple drag animation in my React Native 0.62.2 app. The drag is implemented with react-native-gesture-handler 1.6.1 and react-native-reanimated 1.10.1. The dragged item is an image in a grid. There are 2 grid or 3 grids in a row to display images. Here is the code:

        const dragX = new Value(0);
        const dragY = new Value(0);
        const state = new Value(-1);
        const handleGesture = event([
            {
              nativeEvent: {
                translationX: dragX,
                translationY: dragY,
                state,
              },
            }, 
          ]);
        let aniStyle = {
            transform:[
                { translateY : dragY },
                { translateX : dragX }
            ]
        };
        return (
          <PanGestureHandler 
               onGestureEvent={handleGesture} 
               onHandlerStateChange={handleGesture}>
             //image item goes here
          </PanGestureHandler>
        )

There is no offset defined so image will swing back to its original position with 2nd or late drags before moving along with the cursor. After first drag, I notice when the image is clicked, the image swings back to its original position and, stops responding to any further drag. Is it a bug?

created time in 3 days

issue commentcomputerjazz/react-native-draggable-flatlist

Does this works for Flatlist of 2 or more columns?

multiple columns will be a great feature. There is no one else (draggable list?grid) is as popular as this module, or even close. Multiple columns will certainly increase its adoption.

felire

comment created time in 11 days

issue openedtongyy/react-native-draggable

Android: flatlist + react-native-draggable =? draggable grid

I am looking for a robust draggable grid (for images display and drag/sort) module on Android (and IOS which seems has less problem with draggable grid) and tried more than 5 modules. Some of them are not good enough on android platform and others have errors. I don't know much about react-native-draggable module. But is it possible to use react-native-draggable and flatlist to create a robust draggable grid module on Android (IOS shall be working as well)? Or even better an existing module which is ready to use. Many thanks.

created time in 11 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

Has the code been updated last 2 days? I am getting this error after uploading the images. My code hasn't been changed. Deleted node_modules and re-install didn't make difference.

Capture

emclab

comment created time in 11 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

Thanks for the info. It would be more clear if there are a few words for some of the property specific to your design. I read the DEMO code a few times and can only guess as good as I can.

emclab

comment created time in 11 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

I rolled back to version 1.03 and found the problem. It is the

<GridView data={pics} numColumns={3} renderItem={renderItem} onPressCell={onPressCell} onReleaseCell={(items) => console.log("Hi ", items)} //<<==drag works fine with this. onReleaseCell={items => updateImages(items)} //<<==drag doesn't work. updateImages is a function passed in from parent to update image data in parent component. The updateImageswill re-render parent component (including gridview) with reorder. />

Is there fix for this?

emclab

comment created time in 11 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

I was not able to pin point the problem. The draggable grid is inside a accordion component wrapped with <Animated.View> and <View>. But I don't see those 2 to be problem. The issue probably is with how renderItem is implmented (In my case packed with displaying, modal for zoom in and icon for delete image). Here is the code for accordion. I implemented a react-native-draggable-flatlist list inside the accordion and it works fine. I want to implement one view for both image display and image dragging instead having 2 views one for display and another for dragging.

emclab

comment created time in 11 days

issue commentGeekyAnts/NativeBase

Nested VirtualizedLists Warning in Flatlist with <Content> Tags

same problem when using draggable list inside <Content>

dl-husky73

comment created time in 11 days

issue comment5up-okamura/react-native-draggable-gridview

crashes if data changes while dragging

Clone the fork under node_modules . Now uploading image crash the app. Is there something else for setup?

Capture

AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:69184:22 [Fri Jul 31 2020 23:04:23.856] LOG 获取照片出错 [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.] [Fri Jul 31 2020 23:04:23.859] LOG more images to add : []

joonhocho

comment created time in 13 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

Uploading image crash the app after cloning joonhocho's fork:

Capture

AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:69184:22 [Fri Jul 31 2020 23:04:23.856] LOG 获取照片出错 [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.] [Fri Jul 31 2020 23:04:23.859] LOG more images to add : []

emclab

comment created time in 13 days

issue closedSHISME/react-native-draggable-grid

这个模块只能用于typescript project?

例子中用到了interface。 谢谢!

closed time in 14 days

emclab

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

Also is there a javascript version of the demo for the module? The current demo is in typescript. Thanks.

emclab

comment created time in 14 days

issue closedmochixuan/react-native-drag-sort

抄ScrollFixedAddPage例子无法拖动

react-native-drag-sort是目前找到的唯一一个满足我需求的。Well done and thank you!

我按照ScrollFixedAddPage的例子,做了少许改动,和image picker一起用。把isEnterEdit去掉了。我希望实现的功能是: 1. 用户可以左右和上下拖动调整图像的次序 2. 可以click x to delete图像 3. 3行排列。一排有3张图像。 4. 最后一张是+

Capture

以下是code:

const [scrollEnabled, setScrollEnabled] = useState(true);
const parentWidth = screen_width - 18
const marginChildrenTop = 7
const marginChildrenBottom = 0
const marginChildrenLeft = 0
const marginChildrenRight = 7
childrenWidth = parentWidth/3;
childrenHeight = childrenWidth;

 const renderItem = (item,index) => {
     return (
        <View style={styles.item}>
            {/* <View style={styles.item_children}> */}
                <FastImage
                    source={{uri:item.path}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    key={index}
                    style={{
                        width:childrenWidth-1, 
                        height:childrenWidth-1, 
                        position:"absolute",
                        //verticalAlign:0,
                        //paddingTop:0,
                
                    }}
                    />
                
            {/* </View> */}
            <Image
                style={styles.item_delete_icon}
                source={require('../../../assets/image/clear.png')}
            />
        </View>
     )
  }

 return (
    <ScrollView
        ref={(scrollView) => scrollView = scrollView}
        scrollEnabled = {scrollEnabled}
        style={styles.container}>
        <View style={styles.sort}>
            <DragSortableView
                dataSource={pics}
                parentWidth={parentWidth}

                childrenWidth= {childrenWidth}
                childrenHeight={childrenHeight}

                marginChildrenTop={marginChildrenTop}
                marginChildrenBottom={marginChildrenBottom}
                marginChildrenLeft={marginChildrenLeft}
                marginChildrenRight={marginChildrenRight}

                onDragStart={(startIndex,endIndex)=>{
                    setScrollEnabled(false);
                }}
                onDragEnd={(startIndex)=>{
                    setScrollEnabled(true);
                }}
                onDataChange = {(data)=>{
                    // delete or add data to refresh
                    updateImages(data);
                    
                    /* if (data.length != len) {
                        deleteImage(data);
                    } */
                }}
                onClickItem={(data,item,index)=>{
                    updateImages(data);

                }}
                keyExtractor={(item,index)=> item.id} // FlatList作用一样,优化
                renderItem={(item,index)=>{
                    return renderItem(item,index)
                }}
            />
            <View style={[
                {
                    width: childrenWidth,
                    height: childrenHeight,
                    marginTop: marginChildrenTop,
                    marginLeft: marginChildrenLeft,
                    marginBottom: marginChildrenBottom,
                    marginRight: marginChildrenRight,
                    justifyContent: 'center',
                    alignItems: 'center'
                },
                len % 4 !== 0 ? {
                    position: 'absolute',
                    zIndex: 999,
                    top: parseInt(len / 4) * (childrenHeight + marginChildrenBottom + marginChildrenTop),
                    left: parseInt(len % 4) * (childrenWidth + marginChildrenLeft + marginChildrenRight)
                } : {}
            ]}>
                <TouchableOpacity 
                    style={styles.item_children} 
                    onPress={()=> {
                        helper.handleAddPicture(addImages, 'photo', false, null)
                    }}
                >
                    <Text style={{fontSize: 24,color: '#000'}}>+</Text>
                </TouchableOpacity>
            </View>
        </View>
    </ScrollView>
)

const style = StyleSheet.create({
 container: {
    flex: 1,
    paddingTop: 20,
},
sort: {
    marginLeft: 20,
},
item: {
    width: childrenWidth-10,
    height: childrenHeight-10,
},
item_children: {
    width: childrenWidth-8,
    height: childrenHeight-8,
    //backgroundColor: '#f2f2f2',
    backgroundColor:'#ffe6f7',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    marginTop: 8,

},
item_delete_icon: {
    //width: 3,
    //height: 3,
    position: 'absolute',
    right: 1,
    top: 1,
},
item_icon: {
    width: childrenWidth-4-8,
    height: childrenHeight-4-8,
    resizeMode: 'contain',
    position: 'absolute'
},

现在的问题是无法拖动。另外图像只能排两行。另外,delete icon只能摆在左上角,background颜色无法改变。不知道哪里没有抄对。另外Doc里Download Android Example的连接不好用。谢谢。

closed time in 14 days

emclab

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

still not fully functioning. I Remove and re-install the module. ./gradlew clean and launch the app. When I pull to move the 2nd image to 1st grid, the 1st image moves to 2nd grid. When I release and drop the 2nd image, then the 1st image which has moved to 2nd grid jumps back to 1st grid and overlap. Here is the screen shot:

Capture

emclab

comment created time in 14 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

5up-okamura, Thank you and will update. Yes, I realized that I needed only reset modalDiag in onPressCell and moved the <Modal> out of it.

emclab

comment created time in 14 days

issue comment5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

Also I would like to implement Modal to zoom in image with a click. Tried onPressCell and it didn't work with a click over the image. Here is the code:

import Modal from 'react-native-modal';
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 const onPressCell = (item, index) => {
    return (
        <Modal isVisible={modalDialog===index} style={styles.modal} onBackdropPress={()=>setModalDialog(null)} >
        <TouchableOpacity style={styles.modalOpacity} onPress={()=>{setModalDialog(null)}}>
            <ReactNativeZoomableView
                maxZoom={3}
                minZoom={1}
                zoomStep={0.5}
                initialZoom={1}
                bindToBorders={true}
                captureEvent={true}
            >
                <FastImage 
                    source={{uri:item.path}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    style={{
                        width:screen_width-10, 
                        height:screen_ht-10, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </ReactNativeZoomableView>
        </TouchableOpacity>
    </Modal>   
    )
};
emclab

comment created time in 15 days

issue opened5up-okamura/react-native-draggable-gridview

2 grids overlap and pile up

I love the simplicity of the module. A few lines of code to get things done!

The problem I have most likely is not a bug but just how to. My RN 0.62.2 app displays image in grid (android emulator) and when I drag and drop an image, the 2 images are overlapped and I have to move them apart manually. what the setting is missing here? Here is code:

 import FastImage from 'react-native-fast-image';
 const renderItem = (item) => {
    return (        
                <FastImage
                    source={{uri:item.path}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    key={item.key}
                    style={{
                        width:childrenWidth-1, //<<<==childrenWidth is 1/3 of the screen width
                        height:childrenWidth-1, 
                        position:"absolute",
                    }}
                    />
                
    )
}

return (
    <GridView
        data={pics}  //<<==pics is the array holding images uploaded
        numColumns={3}
        renderItem={renderItem}
        onReleaseCell={(items) => updateImages(items)}  //<<==method to update image data in parent component
    />
);

};

Here is the screen shot of initial screen after 4 images uploaded:

Capture

Here is the screen shot after one image was dragged and dropped:

Capture1

The 2 images are overlapped with each other.

created time in 15 days

issue openedSHISME/react-native-draggable-grid

这个模块只能用于typescript project?

例子中用到了interface。 谢谢!

created time in 15 days

issue commentmochixuan/react-native-drag-sort

抄ScrollFixedAddPage例子无法拖动

呃呃,很长按可以拉动。可以调节长按的时间吗?感觉按的时间比普通的长按长

emclab

comment created time in 15 days

issue commentmochixuan/react-native-drag-sort

抄ScrollFixedAddPage例子无法拖动

按建议作了如下改动。 把<TouchableOpacity>换成<View>。把onPress拿掉:

         <View style={styles.item_children}>             
                    <Text style={{fontSize: 24,color: '#000'}}>+</Text>
          </View>

然后把onClickItem改成:

      onClickItem={(data,item,index)=>{
                    helper.handleAddPicture(addImages, 'photo', false, null)
      }

改动后,拉动照片换位还是没有反应(在照片上点左鼠标键,然后拖动)。点击图像左上角的X会击发onClickItem运行从相册取照片。选照片后会出错:[Error: User cancelled image selection]. 改动前用TouchableOpacity运行选照片不会出错。

emclab

comment created time in 16 days

issue openedmochixuan/react-native-drag-sort

抄ScrollFixedAddPage例子无法拖动

react-native-drag-sort是目前找到的唯一一个满足我需求的。Well done and thank you!

我按照ScrollFixedAddPage的例子,做了少许改动,和image picker一起用。把isEnterEdit去掉了。我希望实现的功能是: 1. 用户可以左右和上下拖动调整图像的次序 2. 可以click x to delete图像 3. 3行排列。一排有3张图像。 4. 最后一张是+

Capture

以下是code:

const [scrollEnabled, setScrollEnabled] = useState(true);
const parentWidth = screen_width - 18
const marginChildrenTop = 7
const marginChildrenBottom = 0
const marginChildrenLeft = 0
const marginChildrenRight = 7
childrenWidth = parentWidth/3;
childrenHeight = childrenWidth;

const renderItem = (item,index) => { return ( <View style={styles.item}> {/* <View style={styles.item_children}> */} <FastImage source={{uri:item.path}} resizeMode={FastImage.resizeMode.cover} key={index} style={{ width:childrenWidth-1, height:childrenWidth-1, position:"absolute", //verticalAlign:0, //paddingTop:0,

                    }}
                    />
                
            {/* </View> */}
            <Image
                style={styles.item_delete_icon}
                source={require('../../../assets/image/clear.png')}
            />
        </View>
    )
}

return (
    <ScrollView
        ref={(scrollView) => scrollView = scrollView}
        scrollEnabled = {scrollEnabled}
        style={styles.container}>
        <View style={styles.sort}>
            <DragSortableView
                dataSource={pics}
                parentWidth={parentWidth}

                childrenWidth= {childrenWidth}
                childrenHeight={childrenHeight}

                marginChildrenTop={marginChildrenTop}
                marginChildrenBottom={marginChildrenBottom}
                marginChildrenLeft={marginChildrenLeft}
                marginChildrenRight={marginChildrenRight}

                onDragStart={(startIndex,endIndex)=>{
                    setScrollEnabled(false);
                }}
                onDragEnd={(startIndex)=>{
                    setScrollEnabled(true);
                }}
                onDataChange = {(data)=>{
                    // delete or add data to refresh
                    updateImages(data);
                    
                    /* if (data.length != len) {
                        deleteImage(data);
                    } */
                }}
                onClickItem={(data,item,index)=>{
                    updateImages(data);

                }}
                keyExtractor={(item,index)=> item.id} // FlatList作用一样,优化
                renderItem={(item,index)=>{
                    return renderItem(item,index)
                }}
            />
            <View style={[
                {
                    width: childrenWidth,
                    height: childrenHeight,
                    marginTop: marginChildrenTop,
                    marginLeft: marginChildrenLeft,
                    marginBottom: marginChildrenBottom,
                    marginRight: marginChildrenRight,
                    justifyContent: 'center',
                    alignItems: 'center'
                },
                len % 4 !== 0 ? {
                    position: 'absolute',
                    zIndex: 999,
                    top: parseInt(len / 4) * (childrenHeight + marginChildrenBottom + marginChildrenTop),
                    left: parseInt(len % 4) * (childrenWidth + marginChildrenLeft + marginChildrenRight)
                } : {}
            ]}>
                <TouchableOpacity 
                    style={styles.item_children} 
                    onPress={()=> {
                        helper.handleAddPicture(addImages, 'photo', false, null)
                    }}
                >
                    <Text style={{fontSize: 24,color: '#000'}}>+</Text>
                </TouchableOpacity>
            </View>
        </View>
    </ScrollView>
)

const style = StyleSheet.create({ container: { flex: 1, paddingTop: 20, }, sort: { marginLeft: 20, }, item: { width: childrenWidth-10, height: childrenHeight-10, }, item_children: { width: childrenWidth-8, height: childrenHeight-8, //backgroundColor: '#f2f2f2', backgroundColor:'#ffe6f7', justifyContent: 'center', alignItems: 'center', borderRadius: 4, marginTop: 8,

},
item_delete_icon: {
    //width: 3,
    //height: 3,
    position: 'absolute',
    right: 1,
    top: 1,
},
item_icon: {
    width: childrenWidth-4-8,
    height: childrenHeight-4-8,
    resizeMode: 'contain',
    position: 'absolute'
},

现在的问题是无法拖动。另外图像只能排两行。另外,delete icon只能摆在左上角,background颜色无法改变。不知道哪里没有抄对。另外Doc里Download Android Example的连接不好用。谢谢。

created time in 16 days

issue commentAzure/azure-storage-js

can I use this library in a React Native app?

XiaoningLiu, does Azure storage provide in-house module for react native? There are a few 3rd party modules for react native and I didn't find in-house RN module. For a RN app which only access/upload the Azure blob storage, what module do you recommend? The scenario is that the mobile app users are getting the temporary key from its nodejs backend server and use the temporary key to access and upload blob images on Azure.

ManuRodgers

comment created time in 21 days

issue commentaliyun/aliyun-oss-react-native

安装OSS模块后app launch compile错误

acgtek@yahoo.com. Thank you very much!

emclab

comment created time in 22 days

issue commentaliyun/aliyun-oss-react-native

安装OSS模块后app launch compile错误

Leo2018Wu, 试得有进展吗?我新init了一个项目,然后把老code copy过来。刚试装,仅仅import. 又出compoile错误。这个module太老朽,不堪大用。

我正在转用Azure. setting up Azure在中国国内的账户。另外一个是亚马逊中国。但Azure中国比亚马逊好用。

emclab

comment created time in 22 days

issue commentivpusic/react-native-image-crop-picker

[ Feature Request ] List images in the order they are picked from album

Can't agree more. I asked for the same feature in#1345

AbhiShrek

comment created time in 22 days

issue commentivpusic/react-native-image-crop-picker

[Android]Images are not displayed as the order they are selected

@ivpusic, Is it possible to be included in future release? If user picks up multiple images for a subject, she/he likely want to show images in the same order as they were picked. For example, a real estate agent may want to show the bird view of a house as first image before presenting other detail of the house. Thanks.

emclab

comment created time in 23 days

issue openedshijingsh/react-native-customized-image-picker

Is the order of image pick observed when returning?

I am looking for an image picker which has the same order as images were picked. For example, if 3 images are picked in order of image2, image1 and image3. then the image picker will return an array of 3 images in order of [image2, image1,image3]. Does react-native-customized-image-picker support this?

created time in 23 days

issue openedivpusic/react-native-image-crop-picker

Images are not displayed as the order they are selected

Version

Tell us which versions you are using:

  • react-native-image-crop-picker v0.32.2
  • react-native v0.62.2

Platform

Tell us to which platform this issue is related

Android

Expected behaviour

Maintain the order as how the multiple images were selected. For example, the first image select is the first in array returned.

Actual behaviour

The images selected seems ordered by name

Steps to reproduce

  1. select 2 images and remember which one is the first one

2.display on screen

3.select the same 2 images in reverse order as step 1.

  1. Display on screen. Are they in different order? It is not in my case.

Attachments

// stacktrace or any other useful debug info

Love react-native-image-crop-picker? Please consider supporting our collective: 👉 https://opencollective.com/react-native-image-crop-picker/donate

created time in 25 days

issue commentascoders/react-native-image-zoom

ImageZoom move image down and only show a portion

More information about the issue is available here

emclab

comment created time in 25 days

issue openedascoders/react-native-image-zoom

ImageZoom move image down and only show a portion

My RN app is 0.62.2, ImageZoom is 2.1.12. The ImageZoom is going to zoom in images presented in Android emulator with FastImage. Here is the code:

      return (
            <ImageZoom  
                        cropWidth={screen_width}   //<<<===full screen width returned by Dimension.get(window).width
                        cropHeight={screen_ht}   //<<<===full screen height returned by Dimension.get(window).height
                        imageWidth={width}
                        imageHeight={ht}
                        enableCenterFocus={false}
                        >
                <FastImage 
                    source={{uri:img_source}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    style={{
                        width:width, 
                        height:ht, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </ImageZoom>
            );

The problem is that the image showed was pushed down half way and only show a portion. Capture1

But ImageZoom was removed and only show with FastImage, then the image aligns to the top which is correct. I tried to set enableCenterFocus to false but it didn't help. How to solve this problem?

created time in 25 days

issue commentfacebook/react-native

Unable to resolve module debugger-ui after upgrading (rebuild) to 0.63.1

Capture

Here is another error for RN 0.63.1

emclab

comment created time in a month

issue openedGeekyAnts/NativeBase

ref Error of Content.js on React Native 0.63.1

<!--Hi! Thanks for trying out NativeBase!-->

<!--Take a look at these before heading towards creating an issue. Before you submit your issue, please make sure to check the following boxes by putting an x in the [ ] (don't: [x ], [ x], do: [x])-->

I have gone through these following points

  • [] Check latest documentation: https://docs.nativebase.io/
  • [] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
  • [] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
  • [] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
  • [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
  • [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

On latest RN 0.63.1/native-base 2.13.12, Content throws error:

[Fri Jul 17 2020 18:38:19.215] ERROR Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of Content. in Unknown (at Content.js:37) in RCTView (at View.js:34) in View (at SafeAreaView.js:41) in ForwardRef(SafeAreaView) (at Content.js:36) in Content (at connectStyle.js:392) in Styled(Content) (at Itie.js:207) in RCTView (at View.js:34) in View (at Container.js:12) in Container (at connectStyle.js:392) in Styled(Container) (at Itie.js:189) in RCTView (at View.js:34) in View (at ScrollView.js:1124) in RCTScrollView (at ScrollView.js:1260) in ScrollView (at ScrollView.js:1286) in ScrollView (at Itie.js:185) in RCTView (at View.js:34) in View (at SafeAreaView.js:41) in ForwardRef(SafeAreaView) (at Itie.js:184) in Itie (at SceneView.tsx:112) in StaticContainer in StaticContainer (at SceneView.tsx:105) in EnsureSingleNavigator (at SceneView.tsx:104) in SceneView (at useDescriptors.tsx:150) in RCTView (at View.js:34) in View (at CardContainer.tsx:198) in RCTView (at View.js:34) in View (at CardContainer.tsx:197) in RCTView (at View.js:34) in View (at CardSheet.tsx:33) in ForwardRef(CardSheet) (at Card.tsx:562) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544) in PanGestureHandler (at GestureHandler.native.tsx:13) in PanGestureHandler (at Card.tsx:538) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:534) in RCTView (at View.js:34) in View (at Card.tsx:528) in Card (at CardContainer.tsx:167) in CardContainer (at CardStack.tsx:552) in RNSScreen (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at src/index.native.js:109) in Screen (at Screens.tsx:67) in MaybeScreen (at CardStack.tsx:545) in RNSScreenContainer (at src/index.native.js:134) in ScreenContainer (at Screens.tsx:45) in MaybeScreenContainer (at CardStack.tsx:455) in CardStack (at StackView.tsx:437) in KeyboardManager (at StackView.tsx:435) in SafeAreaProviderCompat (at StackView.tsx:432) in RCTView (at View.js:34) in View (at GestureHandlerRootView.android.js:26) in GestureHandlerRootView (at StackView.tsx:431) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at AppScreen.js:82) in AppScreen (at SceneView.tsx:112) in StaticContainer in StaticContainer (at SceneView.tsx:105) in EnsureSingleNavigator (at SceneView.tsx:104) in SceneView (at useDescriptors.tsx:150) in RCTView (at View.js:34) in View (at CardContainer.tsx:198) in RCTView (at View.js:34) in View (at CardContainer.tsx:197) in RCTView (at View.js:34) in View (at CardSheet.tsx:33) in ForwardRef(CardSheet) (at Card.tsx:562) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:544) in PanGestureHandler (at GestureHandler.native.tsx:13) in PanGestureHandler (at Card.tsx:538) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:534) in RCTView (at View.js:34) in View (at Card.tsx:528) in Card (at CardContainer.tsx:167) in CardContainer (at CardStack.tsx:552) in RNSScreen (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at src/index.native.js:109) in Screen (at Screens.tsx:67) in MaybeScreen (at CardStack.tsx:545) in RNSScreenContainer (at src/index.native.js:134) in ScreenContainer (at Screens.tsx:45) in MaybeScreenContainer (at CardStack.tsx:455) in CardStack (at StackView.tsx:437) in KeyboardManager (at StackView.tsx:435) in RNCSafeAreaProvider (at SafeAreaContext.tsx:74) in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42) in SafeAreaProviderCompat (at StackView.tsx:432) in GestureHandlerRootView (at GestureHandlerRootView.android.js:31) in GestureHandlerRootView (at StackView.tsx:431) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at App.js:31) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:376) in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91) in ThemeProvider (at NavigationContainer.tsx:90) in ForwardRef(NavigationContainer) (at App.js:30) in App (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

<!-- DO fill out the below form to give us a better idea about your environment and help us debug it quicker. Issues without the required details will mostly be closed.-->

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: 12.18 yarn: 1.22.4 react 16.13.1 native-base:2.13.12 Android emulator

Expected behaviour

Actual behaviour

Steps to reproduce

  1. create react native project
  2. install native-base 2.13.12
  3. Use the following render structure to reproduce error : <SafeAreaView> <ScrollView> <Container> //<<<=native base component <Header> <Content padder> //<<<==Content causes error <Form> <Input onChangeText={nameChange} placeholder={'Name'} /> <Textarea padder rowSpan={2} bordered placeholder="Spec" onChangeText={despChange} /> <Footer> <!--
  • Include code snippet and output screenshot.
  • Include code snippet in preformatted mode (code) and not in screenshot.
  • In case of lengthy code, then cut down into simple screen.
  • Shared snippet should have import statement, parent component and the topmost component in which the component (for which issue is raised) is wrapped.
  • Issue will be closed abruptly in case of buggy code snippet. --> The error screen: Capture

Is the bug present in both iOS and Android or in any one of them?

Error on Android platform. Not tested on IOS

Any other additional info which would help us debug the issue quicker.

###Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

<!-- In case of not following the above instructions, the issue will be closed abruptly -->

created time in a month

issue openedfacebook/react-native

Unable to resolve module debugger-ui after upgrading (rebuild) to 0.63.1

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html After upgrading to 0.63.1 from 0.62.2 by rebuilding the project from ground up, there is error about module debugger-ui:

[Fri Jul 17 2020 16:26:17.494] BUNDLE ./index.js ░░░░░░░░░░░░░░░░ 0.6% (1/13)Error: Unable to resolve module./debugger-ui/ui.bcd3f9d1.js` from ``:

None of these files exist:

  • debugger-ui\ui.bcd3f9d1.js(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  • debugger-ui\ui.bcd3f9d1.js\index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx) at ModuleResolver.resolveDependency (C:\D\code\js\xyz_app\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15) at ResolutionRequest.resolveDependency (C:\D\code\js\xyz_app\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (C:\D\code\js\xyz_app\node_modules\metro\src\node-haste\DependencyGraph.js:287:16) at C:\D\code\js\xyz_app\node_modules\metro\src\lib\transformHelpers.js:267:42 at Server.<anonymous> (C:\D\code\js\xyz_app\node_modules\metro\src\Server.js:841:41) at Generator.next (<anonymous>) at asyncGeneratorStep (C:\D\code\js\xyz_app\node_modules\metro\src\Server.js:99:24) at _next (C:\D\code\js\xyz_app\node_modules\metro\src\Server.js:119:9)`

React Native version:0.63.1

Run react-native info in your terminal and copy the results here.

System: OS: Windows 10 10.0.18362 CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz Memory: 584.20 MB / 7.76 GB Binaries: Node: 12.18.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 23, 27, 28, 29 Build Tools: 27.0.3, 28.0.3, 29.0.0, 29.0.0, 29.0.2, 29.0.3 System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom Android NDK: 21.0.6113669 IDEs: Android Studio: Version 3.4.0.0 AI-183.6156.11.34.5522156 Languages: Java: 1.8.0_201 Python: 2.7.15 npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.1 => 0.63.1 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. create a react-native package and install the following modules from package.json

"scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "@react-native-community/async-storage": "^1.11.0", "@react-native-community/masked-view": "^0.1.10", "@react-navigation/native": "^5.7.0", "@react-navigation/stack": "^5.7.0", "native-base": "^2.13.12", "react": "16.13.1", "react-native": "0.63.1", "react-native-confirmation-code-field": "^6.5.0", "react-native-device-info": "^5.6.2", "react-native-easy-grid": "^0.2.2", "react-native-fast-image": "^8.3.2", "react-native-gesture-handler": "^1.6.1", "react-native-image-crop-picker": "^0.32.2", "react-native-image-pan-zoom": "^2.1.12", "react-native-keychain": "^6.1.1", "react-native-reanimated": "^1.9.0", "react-native-responsive-screen": "^1.4.1", "react-native-safe-area-context": "^3.1.1", "react-native-screens": "^2.9.0", "react-native-tag-autocomplete": "^1.0.22", "react-native-vector-icons": "^7.0.0", "socket.io-client": "2.1.1" }, "devDependencies": { "@babel/core": "^7.10.5", "@babel/runtime": "^7.10.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.1.0", "eslint": "^7.4.0", "jest": "^26.1.0", "metro-react-native-babel-preset": "^0.60.0", "react-test-renderer": "16.13.1" }, "jest": { "preset": "react-native", "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|react-navigation|react-navigation-redux-helpers|@react-navigation/.)", "node_modules/(?!(react-native|react-native-button|native-base-.|react-native-.*)/)" ] }

  1. change minSDKversion to 21 from 16 in bundle.gradle. run npx react-native run-android and check the error.

Expected Results

Describe what you expected to happen. no error

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

created time in a month

issue commentfacebook/react-native

Debugger breaks the ability to interact with my app after upgrade

me too with RN 0.62.2. It just happened a few hours ago and the app in Android emulator stuck by the error.

crutchcorn

comment created time in a month

issue openedDylanVann/react-native-fast-image

Error with RN Animated.createAnimatedComponent()

Describe the bug created animated component with RN Animated to zoom in an image by following an online article:

                const AniFastImage = Animated.createAnimatedComponent(FastImage);
                scale = new Animated.Value(1);

The view code is:

            <PinchGestureHandler
                onGestureEvent={onZoomEvent}
                onHandlerStateChange={onZoomStateChange}>
                <Animated.AniFastImage 
                    source={{uri:img_source}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    style={{
                        width:width, 
                        height:ht, 
                        transform:[{scale: this.scale }],
                    }}
                />
            </PinchGestureHandler>

Before adding animated zoon in with react-native-gesture-handler, the FastImage works fine with loading images. The error is coming out of Animated.createAnimatedCompnent() and I am wondering if there is some issue for FastImage working with RN Animated.createAnimatedComponent().

To Reproduce Steps to reproduce the behavior if possible, or a link to a reproduction repo:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior The image shall be loaded and can be zoom in and out.

Screenshots If applicable, add screenshots to help explain your problem. Capture

Dependency versions

  • React Native version:0.62.2
  • React version:16.11.0
  • React Native Fast Image version:8.1.5

Note: if these are not the latest versions of each I recommend updating as extra effort will not be taken to be backwards compatible, and updating might resolving your issue.

created time in a month

issue commentJoeRoddy/react-native-tag-autocomplete

Virtualize key error

jannomeister, thank for the solution. I added the code above in my AutoTags to get rid of warning about unique keys. But virsualizedList can't never be nested is still present and this one causes the page fails to reload after deleting. Tried to remove <ScrollView> and it didnt' help.

jannomeister

comment created time in a month

issue commentJoeRoddy/react-native-tag-autocomplete

Virtualize key error

I have the similar error when wrap the tag within <SafeAearView>
<ScrollView> <Container> //<<<== Native Base component

The error is:

[12:59:54] W | ReactNativeJS ▶︎ 'VirtualizedList: missing keys for items, make sure to specify a key or id property on each item or provide a custom keyExtractor.', '', '\nVirtualizedList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:64197:22\nFlatList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62152:36\nRCTView\nRCTView\nAutocomplete@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207561:36\nRCTView\nAutoTags@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207272:36\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nTouchableOpacity@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:57032:36\nItem@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:202579:22\nStyled(Item)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nForm@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200945:22\nStyled(Form)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nKeyboardAwareScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200143:38\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nContent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:199939:22\nStyled(Content)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:198792:22\nStyled(Container)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nItie@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:206865:41\nStaticContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111421:17\nEnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:110110:24\nSceneView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111304:22\nRCTView\nRCTView\nRCTView\nCardSheet@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121241:23\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:105897:38\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116092:34\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nRCTView\nCard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118687:36\nCardContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118400:22\nRNSScreen\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116891:36\nMaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116752:24\nRNSScreenContainer\nScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116978:36\nMaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116725:23\nCardStack@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116293:36\nKeyboardManager@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121424:36\nSafeAreaPr

[12:59:54] W | ReactNativeJS ▶︎ 'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.', '\nVirtualizedList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:64197:22\nFlatList@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62152:36\nRCTView\nRCTView\nAutocomplete@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207561:36\nRCTView\nAutoTags@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:207272:36\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nTouchableOpacity@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:57032:36\nItem@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:202579:22\nStyled(Item)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nForm@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200945:22\nStyled(Form)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nKeyboardAwareScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:200143:38\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nContent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:199939:22\nStyled(Content)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:198792:22\nStyled(Container)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:165101:40\nRCTView\nRCTScrollView\nScrollView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:62508:36\nRCTView\nSafeAreaView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:73829:41\nItie@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:206865:41\nStaticContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111421:17\nEnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:110110:24\nSceneView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:111304:22\nRCTView\nRCTView\nRCTView\nCardSheet@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121241:23\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:105897:38\nPanGestureHandler@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116092:34\nRCTView\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nRCTView\nCard@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118687:36\nCardContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:118400:22\nRNSScreen\nAnimatedComponent@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:61787:24\nAnimatedComponentWrapper\nScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116891:36\nMaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116752:24\nRNSScreenContainer\nScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116978:36\nMaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116725:23\nCardStack@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:116293:36\nKeyboardManager@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:121424:3

The error above starts to appear when typing in tag box. Also the tags won't reload after deleting a tag and this may have something to do with the error above.

jannomeister

comment created time in a month

issue openedjimmybengtsson/react-native-tags-input

Any timeline for auto complete?

Element to be displayed between input and tags. For example suggestions. (Auto suggestions will be implemented in a future release)

I like the way of tag input and its presentation. The feature of auto complete will enhance the module big time. Is there timeline for the addition of auto complete? Thanks.

created time in a month

issue openedivpusic/react-native-image-crop-picker

How to customer buttom text and remove `modified ^` header from the gallery screen?

Version

Tell us which versions you are using:

  • react-native-image-crop-picker v0.32.2
  • react-native v0.62.2
  • win10

Platform

Tell us to which platform this issue is related

  • iOS
  • Android - on Android simulator

Expected behaviour

Nice and working! Initially have some setup issues with default SDK version with installation but it is an easy fix.

The attached image is the current screen shot. Is there any way to remove header of modified ^ as it may confuse users. Also for the text of 1 Selected and button OPEN, how to customize it? I would like to replace OPEN with an icon or another word.

Actual behaviour

image

Steps to reproduce

Attachments

// stacktrace or any other useful debug info

Love react-native-image-crop-picker? Please consider supporting our collective: 👉 https://opencollective.com/react-native-image-crop-picker/donate

created time in a month

issue closedmicrosoft/vscode

Ghost letter Debug in package.json in VS Code editor

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ --> <!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ --> <!-- Please search existing issues to avoid creating duplicates. --> <!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: https://code.visualstudio.com/insiders/ -->

<!-- Use Help > Report Issue to prefill these. -->

  • VSCode Version:1.46.1
  • OS Version:Win10

In the package.json file in my react-native project, there appears a ghost letter Debug. When running yarn install, here is the error:

PS C:\D\code\js\xyz_app> yarn install yarn install v1.22.0 error An unexpected error occurred: "C:\D\code\js\xyz_app\package.json: Unexpected token } in JSON at position 1253". info If you think this is a bug, please open a bug report with the information provided in "C:\D\code\js\xyz_app\yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

However the ghost letter can't be deleted. It shows on editor screen but not editable. So I call it ghost letter. All package.json file has this ghost letter at 4th or 5th line. Recreation of package.json does not help. Uninstalling debugger extension does not help. The same file open in text editor doesn't show the ghost letter and it only happens in VS code. Please help!

Steps to Reproduce:

1.Don't know because the letter Debug can't be deleted. Even I re-create package.json manually and the ghost letter Debug shows up after "scripts" 2.

<!-- Launch with code --disable-extensions to check. --> Does this issue occur when all extensions are disabled?: Yes/No Capture

closed time in a month

emclab

issue commentmicrosoft/vscode

Ghost letter Debug in package.json in VS Code editor

delete lock file fixed problem.

emclab

comment created time in a month

issue openedmicrosoft/vscode

Ghost letter Debug in package.json in VS Code editor

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ --> <!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ --> <!-- Please search existing issues to avoid creating duplicates. --> <!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: https://code.visualstudio.com/insiders/ -->

<!-- Use Help > Report Issue to prefill these. -->

  • VSCode Version:1.46.1
  • OS Version:Win10

In the package.json file in my react-native project, there appears a ghost letter Debug. When running yarn install, here is the error:

PS C:\D\code\js\xyz_app> yarn install yarn install v1.22.0 error An unexpected error occurred: "C:\D\code\js\xyz_app\package.json: Unexpected token } in JSON at position 1253". info If you think this is a bug, please open a bug report with the information provided in "C:\D\code\js\xyz_app\yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

However the ghost letter can't be deleted. It shows on editor screen but not editable. So I call it ghost letter. All package.json file has this ghost letter at 4th or 5th line. Recreation of package.json does not help. Uninstalling debugger extension does not help. The same file open in text editor doesn't show the ghost letter and it only happens in VS code. Please help!

Steps to Reproduce:

1.Don't know because the letter Debug can't be deleted. Even I re-create package.json manually and the ghost letter Debug shows up after "scripts" 2.

<!-- Launch with code --disable-extensions to check. --> Does this issue occur when all extensions are disabled?: Yes/No Capture

created time in a month

issue commentaliyun/aliyun-oss-react-native

安装OSS模块后app launch compile错误

https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.2.12.577f58aboqgIXE

Here is an API example I found and it can run in browser. Please share any findings.

emclab

comment created time in a month

issue commentaliyun/aliyun-oss-react-native

安装OSS模块后app launch compile错误

·Leo2018WU, 能否用REST API 在RN app里用HTTP/HTTPS client上传文件?这样就可以不用aliyun-oss-react-native模块。OSS支持RESTful,理论上应该是可以的。这个模块已经两年没有更新。感觉是弃用了。里面用的ali-oss的版本是4.0,目前最新版是6.9. 差两代。

emclab

comment created time in a month

issue openedBijiabo/aliyun-oss-rn

RN 0.62.2/Nodej 12.18/Win10 compile error

The error is similar to https://github.com/aliyun/aliyun-oss-react-native/issues/82 and it seems to be related to the module aliyun-oss-react-native. The Aliyun's module is just too old. Any help is appreciated! Thanks.

created time in a month

issue commentaliyun/aliyun-oss-react-native

请问还会更新吗?

这个模块已经快两年没有更新了,而且buggy。阿里网站上有关于OSS和RN的文章,都是用这个模块。

fujianjin6471

comment created time in a month

issue openedaliyun/aliyun-oss-react-native

安装OSS模块后app launch compile错误

系统是RN 0.62.2, NodeJS12.18,在yarn add aliyun-oss-react-native后,app launch就开始出现错误。

Configure project :aliyun-oss-react-native WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'. It will be removed soon. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html WARNING: The specified Android SDK Build Tools version (27.0.3) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.5.2. Android SDK Build Tools 28.0.3 will be used. //《《《====app 用的是 29.0.3 To suppress this warning, remove "buildToolsVersion '27.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

Task :app:processDebugManifest FAILED

See http://g.co/androidstudio/manifest-merger for more information about the manifest merger.

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.0.1/userguide/command_line_interface.html#sec:command_line_warnings 119 actionable tasks: 2 executed, 117 up-to-date C:\D\code\js\xyz_app\android\app\src\debug\AndroidManifest.xml:7:5-153 Error: tools:replace specified at line:7 for attribute android:allowBackup, but no new value specified //《《《《===根据提示修改。不好用 C:\D\code\js\xyz_app\android\app\src\debug\AndroidManifest.xml Error: Validation failed, exiting

FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':app:processDebugManifest'.

Manifest merger failed with multiple errors, see logs

  • 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 19s

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.bat app:installDebug -PreactNativeDevServerPort=8081 C:\D\code\js\xyz_app\android\app\src\debug\AndroidManifest.xml:7:5-153 Error: tools:replace specified at line:7 for attribute android:allowBackup, but no new value specified C:\D\code\js\xyz_app\android\app\src\debug\AndroidManifest.xml Error: Validation failed, exiting

FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':app:processDebugManifest'.

Manifest merger failed with multiple errors, see logs

  • 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 19s

at makeError (C:\d\code\js\xyz_app\node_modules\execa\index.js:174:9)
at C:\d\code\js\xyz_app\node_modules\execa\index.js:278:16
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async runOnAllDevices (C:\d\code\js\xyz_app\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:5)
at async Command.handleAction (C:\d\code\js\xyz_app\node_modules\@react-native-community\cli\build\index.js:186:9)

PS C:\d\code\js\xyz_app>

请问有什么方法可以fix问题。谢谢!

created time in a month

issue commentmrousavy/react-native-blurhash

How to generate blurhash in react-native 0.62?

A PR has been created. Thanks.

emclab

comment created time in 2 months

PR opened mrousavy/react-native-blurhash

Generate blurhash for an image

Feature allowing module to generate blurhash for an image.

+1 -0

0 comment

1 changed file

pr created time in 2 months

push eventemclab/react-native-blurhash

emclab

commit sha 7b3c8950d77f694e6885e18499e36c9693afd60a

Create createblurhashatfrontend

view details

push time in 2 months

fork emclab/react-native-blurhash

🖼️ Give your users the loading experience they want.

https://blurha.sh

fork in 2 months

issue commentmrousavy/react-native-blurhash

How to generate blurhash in react-native 0.62?

That would be great. For decentralized storage such as IPFS, generating blurhash at frontend may be the only option. In my use case, it is the input of the image file and output of the blurhash. When a user uploads an image from her/his react-native app, an image record is generated on the server and url of the image and the blurhash are part of the record. Input of URI can be another use case. If you need me to create a PR for the feature, please let me know. Thanks.

emclab

comment created time in 2 months

issue commentmrousavy/react-native-blurhash

How to generate blurhash in react-native 0.62?

Nice feature to have in the module to generate hash. Since the frontend is getting more and more powerful, it makes sense to let the frontend to generate a blurhash when it uploads an image, instead of loading the server which is just a db storage. I would imagine encoding is CPU intensive.

emclab

comment created time in 2 months

issue openedmrousavy/react-native-blurhash

How to generate blurhash?

Question

Very interesting module! My understanding is that the react-native-blurhash module only presents a blurhash at frontend. My question is that how to generate a blurhash in react-native environment. Can I use module blurhash with react-native 0.62 to generate blurhash string? Any concern about the performance at frontend? Many thanks.

Environment

paste the output of `react-native info` here
"react": PASTE_VERSION_HERE,
"react-native": PASTE_VERSION_HERE,
"react-native-blurhash": PASTE_VERSION_HERE

created time in 2 months

issue openedtimfpark/react-native-cache

How fast is the read/write compared with localStorage?

First of all, thumb up for using async storage for cache purpose. My question is how fast is the cache. Can I use it in production environment?

The async storage is slower than localStorage according to this post.

created time in 2 months

issue closedoblador/react-native-keychain

Compilation error: cannot find symbol return context.getPackageManager().hasSystemFeature(PackageManager.FEATURE_FACE);

This is a new installation on a RN 0.62.2 and Nodejs 12.18.0. After yarn add react-native-keychain, the app launch of npx react-native run-android failed with the error:

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.bat app:installDebug -PreactNativeDevServerPort=8081 C:\D\code\js\xyz_app\node_modules\react-native-keychain\android\src\main\java\com\oblador\keychain\DeviceAvailability.java:30: error: cannot find symbol return context.getPackageManager().hasSystemFeature(PackageManager.FEATURE_FACE); ^ symbol: variable FEATURE_FACE location: class PackageManager C:\D\code\js\xyz_app\node_modules\react-native-keychain\android\src\main\java\com\oblador\keychain\DeviceAvailability.java:34: error: cannot find symbol return context.getPackageManager().hasSystemFeature(PackageManager.FEATURE_IRIS); ^ symbol: variable FEATURE_IRIS location: class PackageManager 2 errors

FAILURE: Build failed with an exception.

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

Compilation failed; see the compiler error output for details.

The OS is win10. react-native-keychain is 6.1.1. Here is the package.json:

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.5.1",
"@react-navigation/stack": "^5.5.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-device-info": "^5.6.1",
"react-native-elements": "^2.0.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-keychain": "^6.1.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.5",
"react-native-screens": "^2.8.0",
"react-native-vector-icons": "^6.6.0"

closed time in 2 months

emclab

issue openedoblador/react-native-keychain

Launch error: cannot find symbol return context.getPackageManager().hasSystemFeature(PackageManager.FEATURE_FACE);

This is a new installation on a RN 0.62.5 and Nodejs 12.18.0. After yarn add react-native-keychain, the app launch of npx react-native run-android failed with the error:

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.bat app:installDebug -PreactNativeDevServerPort=8081 C:\D\code\js\xyz_app\node_modules\react-native-keychain\android\src\main\java\com\oblador\keychain\DeviceAvailability.java:30: error: cannot find symbol return context.getPackageManager().hasSystemFeature(PackageManager.FEATURE_FACE); ^ symbol: variable FEATURE_FACE location: class PackageManager C:\D\code\js\xyz_app\node_modules\react-native-keychain\android\src\main\java\com\oblador\keychain\DeviceAvailability.java:34: error: cannot find symbol return context.getPackageManager().hasSystemFeature(PackageManager.FEATURE_IRIS); ^ symbol: variable FEATURE_IRIS location: class PackageManager 2 errors

FAILURE: Build failed with an exception.

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

Compilation failed; see the compiler error output for details.

The OS is win10. react-native-keychain is 6.1.1. Here is the package.json:

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.5.1",
"@react-navigation/stack": "^5.5.1",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-device-info": "^5.6.1",
"react-native-elements": "^2.0.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-keychain": "^6.1.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.5",
"react-native-screens": "^2.8.0",
"react-native-vector-icons": "^6.6.0"

created time in 2 months

issue commenttextileio/js-ipfs-lite

import 'ipfs-lite' caused BUNDLE error with metro resolver in React Native

Among 3 require/import:

import { Peer, BlockStore } from '@textile/ipfs-lite/src/core'; //<<===Okay. no error const { MemoryDatastore } = require('interface-datastore'); //<<===Okay. no error const { setupLibP2PHost } = require('@textile/ipfs-lite/dist/setup/index'); //<<=== this does not work

emclab

comment created time in 3 months

issue commenttextileio/js-ipfs-lite

import 'ipfs-lite' caused BUNDLE error with metro resolver in React Native

Adding src to the import path works for the core:

import { Peer, BlockStore } from '@textile/ipfs-lite/src/core';

But not work for import setup.

emclab

comment created time in 3 months

issue openedtextileio/js-ipfs-lite

import 'ipfs-lite' caused BUNDLE error with metro resolver in React Native

Describe the bug

      import { Peer, BlockStore } from '@textile/ipfs-lite/core';
      import { setupLibP2PHost, MemoryDatastore } from '@textile/ipfs-lite/setup/';

The import statements above causes path related error:

  [Tue May 19 2020 16:23:51.370]  BUNDLE  ./index.js
  error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received     type boolean (false)
   at validateString (internal/validators.js:117:11)
   at Object.dirname (path.js:583:5)
   at resolveFileOrDir (C:\D\code\js\ipat_js\node_modules\metro-resolver\src\resolve.js:256:24)
   at Object.resolve (C:\D\code\js\ipat_js\node_modules\metro-resolver\src\resolve.js:151:20)
   at ModuleResolver.resolveDependency (C:\D\code\js\ipat_js\node_modules\metro\src\node-   haste\DependencyGraph\ModuleResolution.js:143:31)
   at ResolutionRequest.resolveDependency (C:\D\code\js\ipat_js\node_modules\metro\src\node-   haste\DependencyGraph\ResolutionRequest.js:52:18)
   at DependencyGraph.resolveDependency (C:\D\code\js\ipat_js\node_modules\metro\src\node-   haste\DependencyGraph.js:287:16)
   at Object.resolve (C:\D\code\js\ipat_js\node_modules\metro\src\lib\transformHelpers.js:267:42)
   at C:\D\code\js\ipat_js\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
   at Array.map (<anonymous>)

To Reproduce Steps to reproduce the behavior:

  1. Create a React Native app
  2. install rn-nodeify and all shims
  3. Install ipfs-lite
  4. Add the import in App.js and launch the app

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS] Win10
  • React Native 0.62.2
  • Nodejs : 12.16
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6] Android 8.1 simulator
  • OS: [e.g. iOS8.1] Android 8.1
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

package.json:

{ "name": "ipat_js", "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 .", "postinstall": "./node_modules/.bin/rn-nodeify --install fs,path,process,buffer,crypto,stream,vm --hack" }, "dependencies": { "@textile/ipfs-lite": "^0.1.6", "@tradle/react-native-http": "^2.0.0", "assert": "^1.1.1", "browserify-zlib": "^0.1.4", "buffer": "^4.9.1", "console-browserify": "^1.1.0", "constants-browserify": "^1.0.0", "dns.js": "^1.0.1", "domain-browser": "^1.1.1", "events": "^1.0.0", "https-browserify": "0.0.1", "path-browserify": "0.0.0", "process": "^0.11.0", "punycode": "^1.2.4", "querystring-es3": "^0.2.1", "react": "16.11.0", "react-native": "0.62.2", "react-native-crypto": "^2.1.0", "react-native-level-fs": "^3.0.0", "react-native-os": "^1.0.1", "react-native-randombytes": "^3.0.0", "react-native-tcp": "^3.2.1", "react-native-udp": "^2.1.0", "readable-stream": "^1.0.33", "stream-browserify": "^1.0.0", "string_decoder": "^0.10.31", "timers-browserify": "^1.0.1", "tty-browserify": "0.0.0", "url": "^0.10.3", "util": "^0.10.4", "vm-browserify": "0.0.4" }, "devDependencies": { "@babel/core": "^7.9.6", "@babel/runtime": "^7.9.6", "@react-native-community/eslint-config": "^1.1.0", "babel-jest": "^25.5.1", "eslint": "^6.8.0", "jest": "^25.5.3", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.11.0", "rn-nodeify": "^10.2.0" }, "jest": { "preset": "react-native" }, "react-native": { "zlib": "browserify-zlib", "console": "console-browserify", "constants": "constants-browserify", "crypto": "react-native-crypto", "dns": "dns.js", "net": "react-native-tcp", "domain": "domain-browser", "http": "@tradle/react-native-http", "https": "https-browserify", "os": "react-native-os", "path": "path-browserify", "querystring": "querystring-es3", "fs": "react-native-level-fs", "_stream_transform": "readable-stream/transform", "_stream_readable": "readable-stream/readable", "_stream_writable": "readable-stream/writable", "_stream_duplex": "readable-stream/duplex", "_stream_passthrough": "readable-stream/passthrough", "dgram": "react-native-udp", "stream": "stream-browserify", "timers": "timers-browserify", "tty": "tty-browserify", "vm": "vm-browserify", "tls": false }, "browser": { "zlib": "browserify-zlib", "console": "console-browserify", "constants": "constants-browserify", "crypto": "react-native-crypto", "dns": "dns.js", "net": "react-native-tcp", "domain": "domain-browser", "http": "@tradle/react-native-http", "https": "https-browserify", "os": "react-native-os", "path": "path-browserify", "querystring": "querystring-es3", "fs": "react-native-level-fs", "_stream_transform": "readable-stream/transform", "_stream_readable": "readable-stream/readable", "_stream_writable": "readable-stream/writable", "_stream_duplex": "readable-stream/duplex", "_stream_passthrough": "readable-stream/passthrough", "dgram": "react-native-udp", "stream": "stream-browserify", "timers": "timers-browserify", "tty": "tty-browserify", "vm": "vm-browserify", "tls": false }, "metro": { "resolver": {

  }
}

}

created time in 3 months

issue openeddavesag/sequelize-test-helpers

does sequelize-test-helpers work with jest?

`Prerequisites This library assumes:

You are using chai — Version 4 or better. You are using sinon — Version 5 or better. Using mocha is also recommended, but as long as you are using chai and sinon this should work with any test runner.`

Does sequelize-test-helpers work with jest?

created time in 3 months

issue commentLiquidPlayer/LiquidCore

unresolved module nanoid on MacOS 10.15/iOS 13/Node 10.20/ipfs 0.43.3/LC 0.7.8

Deepp0925, have you found a solution for the issue?

emclab

comment created time in 3 months

more