11import { useContext } from 'react' ;
2- import { StyleSheet , View } from 'react-native' ;
2+ import { Platform , StyleSheet , View } from 'react-native' ;
33
44import { colors , A , P , Caption , darkColors } from '~/common/styleguide' ;
55import CustomAppearanceContext from '~/context/CustomAppearanceContext' ;
66import { Library as LibraryType } from '~/types' ;
77
88import { DirectoryScore } from './DirectoryScore' ;
9- import { Star , Download , Eye , Issue , Web , License , Fork , Code , TypeScript } from '../Icons' ;
9+ import {
10+ Star ,
11+ Download ,
12+ Eye ,
13+ Issue ,
14+ Web ,
15+ License ,
16+ Fork ,
17+ Code ,
18+ TypeScript ,
19+ NativeCode ,
20+ } from '../Icons' ;
1021
1122type Props = {
1223 library : LibraryType ;
@@ -34,7 +45,10 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole
3445 id : 'downloads' ,
3546 icon : < Download fill = { iconColor } width = { 16 } height = { 18 } /> ,
3647 content : (
37- < A href = { `https://www.npmjs.com/package/${ npmPkg } ` } style = { styles . link } >
48+ < A
49+ href = { `https://www.npmjs.com/package/${ npmPkg } ` }
50+ style = { styles . link }
51+ containerStyle = { styles . linkContainer } >
3852 { `${ npm . downloads . toLocaleString ( ) } ` } monthly downloads
3953 </ A >
4054 ) ,
@@ -120,6 +134,13 @@ function generateSecondaryData({ github, examples }: LibraryType, isDark: boolea
120134 ) ,
121135 }
122136 : null ,
137+ github . hasNativeCode
138+ ? {
139+ id : 'nativeCode' ,
140+ icon : < NativeCode fill = { iconColor } width = { 16 } height = { 16 } /> ,
141+ content : < P style = { paragraphStyles } > Native code</ P > ,
142+ }
143+ : null ,
123144 github . hasTypes
124145 ? {
125146 id : 'types' ,
@@ -178,6 +199,7 @@ const styles = StyleSheet.create({
178199 datumContainer : {
179200 marginBottom : 8 ,
180201 minHeight : 22 ,
202+ overflow : 'hidden' ,
181203 } ,
182204 displayHorizontal : {
183205 flexDirection : 'row' ,
@@ -188,6 +210,14 @@ const styles = StyleSheet.create({
188210 width : 20 ,
189211 alignItems : 'center' ,
190212 } ,
213+ linkContainer : {
214+ display : 'contents' ,
215+ ...Platform . select ( {
216+ web : {
217+ textOverflow : 'ellipsis' ,
218+ } ,
219+ } ) ,
220+ } ,
191221 link : {
192222 fontSize : 15 ,
193223 fontWeight : 300 ,
@@ -200,7 +230,7 @@ const styles = StyleSheet.create({
200230 fontWeight : 300 ,
201231 } ,
202232 secondaryContainer : {
203- marginBottom : 6 ,
233+ marginBottom : 0 ,
204234 marginRight : 16 ,
205235 } ,
206236 secondaryIconContainer : {
0 commit comments