https://github.com/bartoszklonowski/rn-slider-repro-app

Application containing reproduction examples of issues reported on react-native-community/slider
https://github.com/bartoszklonowski/rn-slider-repro-app

react-native react-native-slider reproduction slider

Last synced: 25 days ago
JSON representation

Application containing reproduction examples of issues reported on react-native-community/slider

• Host: GitHub
• URL: https://github.com/bartoszklonowski/rn-slider-repro-app
• Owner: BartoszKlonowski
• License: mit
• Created: 2022-02-08T22:05:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-01T11:18:36.000Z (about 1 year ago)
• Last Synced: 2024-05-02T03:31:45.894Z (6 months ago)
• Topics: react-native, react-native-slider, reproduction, slider
• Language: JavaScript
• Homepage:
• Size: 1.23 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
 Slider Repro App 



    The following application allows to test and reproduce issues reported on the @react-native-community/slider library.





    

        

    

    

        

    



I maintain the [@react-native-community/slider](https://github.com/callstack/react-native-slider) repository. And very often issues created for the `` require reproduction example and the stable playground to check the specific case.


Also it is needed to keep all the reproduction samples well organized and in decent order, so when I reproduce some problem I can always return to it.

Here's where the **RN Slider Repro App** comes in.

---

## Installation & Usage ##

This application can be installed by:

* cloning the repo and installing it on your device by following the [Running on device](https://reactnative.dev/docs/running-on-device) guides on the official React Native page

* downloading it directly from the [Releases page](https://github.com/BartoszKlonowski/rn-slider-repro-app/releases) and installing it

After successful installation you should see the main screen with all the issues that were already added.


If there's no issue that you are interested in or which you would like to check, please contribute by [adding it to the application](#How-to-add-new-example).

---

## Contributing ##

If you would like to contribute to the *RN Slider Repro App* you are more then welcome!


You can do this in one of the following ways:

* Create an [Issue](https://github.com/BartoszKlonowski/rn-slider-repro-app/issues/new) and request for an example that you are interested in

* Create the [Pull Request](https://github.com/BartoszKlonowski/rn-slider-repro-app/compare) with the desired changes.


Please remember to give the detailed description of why such change is needed, what is the test plan and what are the details of your implementation. This will make the review easier and quicker.

* [Adding your own example](#How-to-add-new-example)

---

## How to add new example? ##

Clone your fork of this repository and run `npm install` in the root of this repository to install all the dependencies and tools


Implement your example by creating new `Component` in the [ReproExamples directory](https://github.com/BartoszKlonowski/rn-slider-repro-app/tree/main/source/ReproExamples)


Please remember to name your component and new file with the format of


`Issue`, where number is the number of issue reported on the @react-native-community/slider

Your component (of example issue 1234) can look like:

```javascript

import React from "react";

import { View, StyleSheet } from "react-native";

export function Issue1234() {

  return (

    

      

    

  );

}

const styles = StyleSheet.create({

  mainLayout: {

    flex: 1,

    alignItems: "stretch",

    justifyContent: "center",

  },

});

```


Next, add your component `Issue1234` to the `screens` array (in the [source/ReproExamples/Issues](https://github.com/BartoszKlonowski/rn-slider-repro-app/blob/main/source/ReproExamples/Issues.js) file)

like so:

```javascript

import { Issue1234 } from "./Issue1234";

const screens = [

    {name: "1234", component: Issue1234}

];

```


And that's it! Your example will appear on the list:

![example](.github/resources/example.PNG)

Note, that here's the real issue presented, as for non-existing issue, or incorrect number the widget will not appear!


If you are satisfied with the example of your issue, and you would like to share the exact usage scenario please do create a PR with your implementation!

---

## Thank you! ##

If you like this project, or you find it helpful, please share your opinion with the author or just give it a star!