Code Monkey home page Code Monkey logo

Comments (2)

 avatar commented on July 29, 2024

Any update on this guys? This is a serious issue to be worked on :/ Still not working with:

"react-native-switch": "^1.5.0"
"react-native": "0.59.9"

from react-native-switch.

barrard avatar barrard commented on July 29, 2024

Hey am I doing something wrong here? the animation seems really bad.
(https://imgflip.com/gif/4mel7q)

import React from "react";
import { View } from "react-native";
import { Switch } from "react-native-switch";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import colors from "../config/colors.js";

export default function SwitchFilter({ onChange, value }) {
  return (
    <View
      style={{
        flexDirection: "row",
      }}
    >
      <Switch
        value={value}
        onValueChange={onChange}
        disabled={false}
        activeText={"Less Than"}
        inActiveText={"Greater Than"}
        circleSize={30}
        barHeight={25}
        circleBorderWidth={1}
        backgroundActive={colors.dark}
        backgroundInactive={colors.dark}
  
        activeTextStyle={{
            color:'red'
        }}
        inactiveTextStyle={{
            color:'green'
        }}
        renderInsideCircle={() => (
          <MaterialCommunityIcons
            color={colors.dark}
            name={value ? "less-than" : "greater-than"}
            size={20}
          />
        )} // custom component to render inside the Switch circle (Text, Image, etc.)
        innerCircleStyle={{
            color:'green',
            backgroundColor:colors.mediumLight,
            alignItems: "center", justifyContent: "center",
            borderWidth:1,
            borderColor:'white',
         }} // style for inner animated circle for what you (may) be rendering inside the circle
        outerCircleStyle={{
            borderWidth:1,
            borderColor:'white',
            borderRadius:10,
            paddingRight: value ? 0 : 15,
            paddingLeft: value ? 15 : 0,
            marginLeft: value ? -20 : 15,
          
        }} // style for outer animated circle
        //   renderActiveText={false}
        //   renderInActiveText={false}
        //   switchLeftPx={2} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
        //   switchRightPx={12} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
        switchWidthMultiplier={value ? 3.3 : 3.8} // multipled by the `circleSize` prop to calculate total width of the Switch
        //   switchBorderRadius={10} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
      />
    </View>
  );
}

from react-native-switch.

Related Issues (20)

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.