Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SwipeAction Can't slide #1193

Open
1 task
ljh257110 opened this issue Aug 30, 2021 · 0 comments
Open
1 task

SwipeAction Can't slide #1193

ljh257110 opened this issue Aug 30, 2021 · 0 comments

Comments

@ljh257110
Copy link

ljh257110 commented Aug 30, 2021

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

undefined

Steps to reproduce

Create a new react native project or upgrade version 3.2.2 to 4.2.0

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/icons-react-native": "^2.3.1",
    "@ant-design/react-native": "^4.2.0",
    "@react-native-community/cameraroll": "^4.0.4",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^4.1.6",
    "@react-native-picker/picker": "^1.16.7",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-pager-view": "^5.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "@react-native-community/eslint-config": "^3.0.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "jest": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { List,SwipeAction } from '@ant-design/react-native';

const App: () => React$Node = () => {
  const right = [
    {
      text: 'More',
      onPress: () => console.log('more'),
      backgroundColor: 'orange',
      color: 'white',
    },
    {
      text: 'Delete',
      onPress: () => console.log('delete'),
      backgroundColor: 'red',
      color: 'white',
    },
  ]
  const left = [
    {
      text: 'Read',
      onPress: () => console.log('read'),
      backgroundColor: 'blue',
      color: 'white',
    },
    {
      text: 'Reply',
      onPress: () => console.log('reply'),
      backgroundColor: 'green',
      color: 'white',
    },
  ]
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <List>
            <SwipeAction
            showRightAction={true}
              style={{ backgroundColor: 'transparent' }}
              right={right}
              left={left}
              onOpen={() => console.log('open')}
              onClose={() => console.log('close')}
            >
              <List.Item extra="extra content">
                Simple example: left and right buttons
              </List.Item>
            </SwipeAction>
          </List>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

What is expected?

SwipeAction can Normal use

What is actually happening?

SwipeAction Can't slide

Environment Info
antd 4.2.0
React 0.63.2
System android 8.1.0
Browser

Has the SwipeAction been modified?a new react native project or upgrade version 3.2.2 to 4.2.0 is all have this problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants