CODEWITHSUNDEEP
reactjsreact-native
hatajie
hatajie

Reputation: 31

how using stylesheet nested typescript in react native

import {StyleSheet, TextStyle, ViewStyle} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  login: {
    padding: 8,
  },
  forgot: {
    marginTop: 12,
  },
  labelStyle: {
    login: {
      fontSize: 12,
    },
    logout: {
      fontSize: 12,
    },
  },
});

export default styles;

Class sheet and Component Class

error in labelStyle

The expected type comes from property 'labelStyle' which is declared here on type 'NamedStyles | NamedStyles<{ container: { flex: number; justifyContent: "center"; alignItems: "center"; }; login: { padding: number; };

Upvotes: 2

Views: 6961

Answers (2)

hatajie
hatajie

Reputation: 31

that's correct, what I wrote is only a partial example of what I will refactor from javascript to typescript, because my stylesheet is much more nested

example my style sheet

/*
 * ---------------------------------------------------------------------------------------
 * ---------------------------------------------------------------------------------------
 *  IMPORTS
 * ---------------------------------------------------------------------------------------
 * ---------------------------------------------------------------------------------------
 */

// ----------------------------------------
// LOCAL & CONFIG IMPORTS
// ----------------------------------------
import { Colors, Sizes } from "../../../configs";

export default {
  container: {
    flex: 1,
    backgroundColor: Colors.main.baseWhite,
    paddingTop: Sizes.isAndroid ? 26 : 8,
  },

  innerContainer: {
    // paddingTop: Sizes.screen.paddingTop,
    paddingBottom: 22,
  },

  innerContainerStatic: {
    flex: 1,
    paddingTop: Sizes.screen.paddingTop,
  },

  backgroundContent: {
    container: {
      flex: -1,
      position: "absolute",
      width: Sizes.screen.width,
      height: Sizes.screen.height,
    },

    content: {
      height: 140,
    },
  },

  footer: {
    grouper: {
      flex: -1,
      height: 71,
      flexDirection: "row",
      borderColor: Colors.main.borderGray,
      paddingHorizontal: Sizes.screen.paddingHorizontal,
      paddingBottom: Sizes.screen.paddingBottom,
      backgroundColor: Colors.main.softGray,
    },

    bottomFiller: {
      flex: -1,
      position: "absolute",
      width: Sizes.screen.width,
      height: 40,
      bottom: -40,
      backgroundColor: Colors.main.softGray,
    },

    blankBottom: {
      flex: -1,
      position: "absolute",
      width: Sizes.screen.width,
      height: 40,
      bottom: -40,
      backgroundColor: Colors.main.baseWhite,
    },

    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      paddingTop: 13,
    },

    icon: {
      container: {
        flex: -1,
        width: 32,
        height: 32,
        paddingBottom: 6,
      },
    },

    counter: {
      container: {
        flex: -1,
        position: "absolute",
        backgroundColor: Colors.main.baseRed,
        paddingHorizontal: 4,
        top: -5,
        right: -5,
        borderRadius: 50,
      },
    },
  },

  bottomPadder: {
    paddingBottom: 16,
  },
};

Upvotes: 1

A-Figerou
A-Figerou

Reputation: 165

You can't nor this is really readable.

In my opinion, this should not be a problem since components are designed to be very specifics, hence your css stylesheet too.

const styles = StyleSheet.create({
  container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
  },
  ...
  login: {
    fontSize: 12,
  },
  logout: {
    fontSize: 12,
  },
});

Upvotes: 0

Related Questions